Inline Images with Data URLs

Inline images use the data URI scheme to embed images directly within web pages. As defined by RFC 2397, data URIs are designed to embed small data items as "immediate" data, as if they were referenced externally. Using inline images saves HTTP requests over externally referenced objects.

Browser Support for Data URLs

While Opera 7.2+, Firefox, Safari, Netscape, and Mozilla support data URIs, Internet Explorer 5-7 do not. However, Internet Explorer 8 reportedly does, bypassing the Acid2 test, making data URLs a viable alternative for embedding smaller decorative images. There are workarounds that you can use for older versions of Internet Explorer.

The Data URL Scheme

You’ve no doubt seen other URL schemes in your travels around the Web, such as http:, ftp:, and mailto: schemes. The data: URL scheme is a way to embed "immediate data" as if it was included externally. Data URLs use the following syntax:

data:[<mediatype>][;base64],<data>

In the case of an image, you’d use a mime type identifying the image (image/gif, for example) followed by a base64 representation of the binary image. Here is an example (note returns included to avoid horizontal scrolling):

<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp
V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7" 
width="16" height="14" alt="embedded folder icon">

The resulting image is a folder icon (cropped screenshot):

CSS and Inline Images

Embedded in XHTML files, data URL images are not cached for repeated use, nor are they cached from page to page. One technique to enable caching is to embed background images in external CSS files. CSS is cached by browsers and these images can be reused with a selector, for example:

ul {list-style:none;}
ul > li {
	margin:0 0 .1em;
	background:url(data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExK
cppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7) 
top left no-repeat; )
	height:14px;
	text-indent:1.5em;
}
</style>

Now the folder image is repeated for each instance of the LI (or you could use a class or ID here as well).

<ul>
<li>Testing inline images, one</li>
<li>Two</li>
<li>Three</li>
</ul>

Which looks like this in Firefox (cropped screenshot):

Data URL Issues

There are two issues with this approach. You must recalculate the base64 data and edit the CSS file every time the image changes. Also, IE versions 5-7 do not support inline images. The first problem has a simple PHP solution thus:

<?php echo base64_encode(file_get_contents("../images/folder16.gif")) ?>

This code reads the image and converts it to base64 automatically at the server. You pay for this editing convenience with some server-side processing.

Internet Explorer Workarounds

There are two ways around IE’s lack of data URL support. Using browser sniffing you can simply show the external image for IE and the embedded images for other browsers. Or you can use JavaScript to simulate data URL support in IE, but this method requires a fair amount of JavaScript code. The PHP code above makes insertion of the base64 equivalent of an image easy:

ul {list-style:none;}
ul > li {
	margin:0 0 .1em;
	background: url(data:image/gif;base64,<?php echo base64_encode(file_get_contents("../images/folder16.gif")) ?>) top left no-repeat;
	height:14px;
	text-indent:1.5em;
}
</style>

Now when your server parses the CSS file, it will automatically encode the binary image file into base64 and send the encoded inline image data directly within the CSS file. Next you need to add browser sniffing to deliver the image for IE and the inline image for all others. You could do this within the CSS file with PHP or with conditional comments like this:

<!â€"[if gte IE 5]>
<style type="text/css" url="ie.css">
<![endif]-->

<!--[if !(IE)]>
<style type="text/css" url="notie.css">
<![endif]-->

where the ie.css file would have a normal image reference thus:

ul > li {
	margin:0 0 .1em;
	background: url(/images/folder16.gif) top left no-repeat;

…

Advantages of Data URLs

Data URLs save HTTP requests. When combined with CSS sprites, data URLs can save numerous HTTP requests. It would be interesting to see if data URLs can be combined with USEMAPS or make a data URL CSS sprite.

• Save HTTP requests, avoids adding to object overhead
• Save concurrent thread – browsers default to two simultaneous connections per hostname
• HTTPS requests are simplified and performance improved

Disadvantages of Data URLs

Inline images are not supported in Internet Explorer 5-7, although version 8 reportedly supports them. The base64 textual representation of image data also takes up more bytes than the binary image. In our tests the base64 data was 39 to 45% larger than the binary image, but with gzip compression the difference was reduced to only 8 to 9% larger. Optimizing your images before converting to base64 reduced the size of the string proportionally.

There are size limitations for inline images. Browsers are only required to support URLs up to 1,024 bytes in length, according to the above RFC. Browsers are more liberal in what they’ll accept, however. Opera limits data URLs to about 4,100 characters. Firefox supports data URLs up to 100K, so this technique is best used for small, decorative images. In summary:

• IE 5-7 does not support
• More steps to update embedded content (reencode, reembed)
• Length limits – technique is useful for smaller, decorative images
• Base64 encoded images are roughly 33% larger than their binary equivalent

Example Data URLs

Below you’ll find some live examples to test on your browser, mirroring the code above.

• Folder Icons Embedded in HTML
• Folder Icons using CSS

http://www.websiteoptimization.com/speed/tweak/inline-images/