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

Digitoxin

why not setup a page with examples, we'll all go through and do real-live testing and report it here – Recipient

Sounds good, I'll try that as well. – Digitoxin

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. – Encephalography

More importantly you probably lose the ability to effectively cache your stuff. – Raggedy

Note that with modern Virtual DOM approaches, this slows rendering down tremendously if you supply image as the src attribute. – Quicklime

@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. – Comeau

@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). – Quicklime

Does all of this work for embedding images in emails? – Piety

Answer 1

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

Adjunction

Hi Philippe, is there any workaround for the 32 KiB size limit in IE8? Is base64 supported in IE7 and IE6? If no, any workarounds (without any size limit)? If yes, any size limit? If yes, any workarounds? – Bridgetbridgetown

Look into this, perhaps it would help: phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under – Housman

Do the standards say anything? Certain upvote for good answer update =). – Ply

IE8 limitation - What I found was that IE8 has an embedded image max character limit of 32,768 (per Microsoft) and my embedded image had just over 35,000. So when the background-image CSS property (url(...embedded image) attempted to load in IE8, because the character limit had been exceeded, the entire class that contained the property was not loaded. I did not persue a fix for this, I reverted back to img for embedded images that exceeded the max and my images loaded appropriately. – Calisa

Unfortunately base64 is not supported by some mailing services like gmail. This makes sending markdown emails annoying af. – Mireillemireles

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.

Emeric

You don't need an online tool to encode to base64. Instead you can use the base64 command line tool on Linux or Mac OS X: echo "data:image/jpeg;base64,"$(cat file.jpg | base64) – Matterhorn

Answer 3

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

Zarla