Embedding Base64 Images

Question

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...);
}

Answer 1

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

Answer 2

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:

• Encode to Base64 format

• Decode from Base64 format

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

Answer 3

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