Embedding Base64 Images

568
votes

Purely out of curiosity, which browsers does Base64 image embedding work in? What I'm referring to is this.

I realize it's not usually a good solution for most things, as it increases the page size quite a bit - I'm just curious.

Some examples:

HTML:

<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />

CSS:

div.image {
  width:100px;
  height:100px;
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...);
}
3
htmlbase64browser
why not setup a page with examples, we'll all go through and do real-live testing and report it here – Nir Levy
64 bits only takes 6 characters 2^6. A text string will have 8 bits per character at a minimum depending on encoding type. You loose at-least 25% efficiency....my quick test showed about 30% loss. – user656925
More importantly you probably lose the ability to effectively cache your stuff. – Hut8
@BrianHaak "tremendously" says nothing. I have personally used base64 images several times with ReactJs during last couple years and had no rendering issues at all. Please provide some measurement. – Lukas Liesis
@LukasLiesis I did measurements in Google Chrome for commercial purposes, so no public reports here. It may be ok for rendering unique images but you have to consider that caching doesn't work at all. In React.js, it's very critical when it leads to complete re-rendering parts (on navigation changes, for example). – Brian Cannard

3 Answers

364
votes

Update: 2017-01-10

Data URIs are now supported by all major browsers. IE supports embedding images since version 8 as well.

http://caniuse.com/#feat=datauri

Data URIs are now supported by the following web browsers:

  • Gecko-based, such as Firefox, SeaMonkey, XeroBank, Camino, Fennec and K-Meleon
  • Konqueror, via KDE's KIO slaves input/output system
  • Opera (including devices such as the Nintendo DSi or Wii)
  • WebKit-based, such as Safari (including on iOS), Android's browser, Epiphany and Midori (WebKit is a derivative of Konqueror's KHTML engine, but Mac OS X does not share the KIO architecture so the implementations are different), as well as Webkit/Chromium-based, such as Chrome
  • Trident
    • Internet Explorer 8: Microsoft has limited its support to certain "non-navigable" content for security reasons, including concerns that JavaScript embedded in a data URI may not be interpretable by script filters such as those used by web-based email clients. Data URIs must be smaller than 32 KiB in Version 8[3].
    • Data URIs are supported only for the following elements and/or attributes[4]:
      • object (images only)
      • img
      • input type=image
      • link
    • CSS declarations that accept a URL, such as background-image, background, list-style-type, list-style and similar.
    • Internet Explorer 9: Internet Explorer 9 does not have 32KiB limitation and allowed in broader elements.
    • TheWorld Browser: An IE shell browser which has a built-in support for Data URI scheme

http://en.wikipedia.org/wiki/Data_URI_scheme#Web_browser_support

53
votes

Most modern desktop browsers such as Chrome, Mozilla and Internet Explorer support images encoded as data URL. But there are problems displaying data URLs in some mobile browsers: Android Stock Browser and Dolphin Browser won't display embedded JPEGs.

I reccomend you to use the following tools for online base64 encoding/decoding:

Check the "Format as Data URL" option to format as a Data URL.

13
votes

Can I use (http://caniuse.com/#feat=datauri) shows support across the major browsers with few issues on IE.