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, by passing 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):

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:

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:

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:

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:

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.

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:

Example Data URLs

Conclusion

With the release of Internet Explorer 8, data URIs will become a viable option. You can embed small images directly within web pages with data URLs to save HTTP requests. Data URLs are a convenient way to create self-enclosed web pages that don't rely on external objects to render.

Further Reading

Learn how AOL and Yahoo! use CSS sprites to improve performance for their busy home pages. CSS sprites save HTTP requests by using CSS positioning to selectively display composite background images. To maximize accessibility and usability, CSS sprites are best used for icons or decorative effects.