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

why not setup a page with examples, we'll all go through and do real-live testing and report it here — Nir Levy, Jul 30 '09 at 15:16
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. — , Jun 11 '12 at 19:22
More importantly you probably lose the ability to effectively cache your stuff. — Hut8, Sep 06 '13 at 15:43
Note that with modern Virtual DOM approaches, this slows rendering down tremendously if you supply image as the `src` attribute. — Brian Cannard, Feb 23 '17 at 21:14
@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, Jun 09 '17 at 19:37
@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, Jun 12 '17 at 18:57

Philippe Gerber · Accepted Answer · 2017-01-09T23:13:32.027

369

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

edited Jan 09 '17 at 23:13

answered Jul 30 '09 at 15:32

Philippe Gerber

17,457
6
45
40

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? – SexyBeast Feb 13 '13 at 14:44
Look into this, perhaps it would help: http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/ – Jul 25 '13 at 15:13
Do the standards say anything? Certain upvote for good answer update =). – Ciro Santilli OurBigBook.com Jan 31 '14 at 16:27
5

IE8 limitation - What I found was that IE8 has an embedded image **max character limit of 32,768** ([per Microsoft](https://msdn.microsoft.com/en-us/library/cc848897(v=vs.85).aspx)) 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. – id.ot Mar 12 '15 at 20:55
Unfortunately `base64` is not supported by some mailing services like `gmail`. This makes sending `markdown emails` annoying af. – Artur Müller Romanov Apr 15 '22 at 16:37

score 53 · Answer 2 · edited Oct 13 '16 at 14:04

53

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.

edited Oct 13 '16 at 14:04

CodeCaster

147,647
23
218
272

answered Oct 03 '13 at 06:18

Brig Ader

799
8
7

4

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) – cstroe Sep 14 '18 at 04:42

score 13 · Answer 3 · answered Nov 04 '15 at 09:57

13

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

answered Nov 04 '15 at 09:57

kehers

4,076
3
30
31

Embedding Base64 Images

3 Answers3

Linked

Related