Home » Inline Images with Data URLs – embed graphics inline with data uri scheme

Inline Images with Data URLs – embed graphics inline with data uri scheme

Summary:

Learn how to embed images into your web pages with data URLs. The data: URI scheme includes images directly into your XHTML pages using code instead of external files, saving valuable HTTP requests.

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):

<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):

folder icon

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):

folder icons in list using css

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.

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

CSS Sprites: How Yahoo.com and AOL.com Improve Web Performance
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.
data: URI scheme
Wikipedia page on data URLs
Data URL kitchen
Converts images to data URLs
Data URL Maker
Also converts images to data URLs
RFC 2397
The “data” URL scheme specification from the IETF.

11 thoughts on “Inline Images with Data URLs – embed graphics inline with data uri scheme”

  1. I used this method (for ASP.NET) on my site and it saves me about 2000 connections a day (from 1000 visits from Firefox/Safari/Opera). The downside is that about 1000 visitors get about 600 bytes more per page.

    Reply
  2. I have binary data of a .swf file in base64 encoding.
    I want to use data URI scheme to display it inline. I have seen images working with data URI scheme, but not with flash tag.
    How to accomplish this?

    Reply
  3. Also, with inline graphics, I doubt the browser would cache the graphics. For small images of course, this doesn’t matter.

    Reply
  4. Michael, it does not cache the graphics but it will still cache the CSS file the graphics are embedded in.
    This technique (now that MS has fixed their browser issue) is ideal in the CMS world where complex templates can have 20+ calls to graphics files.
    As mentioned, this is not a good technique if graphics are constantly changing, but ideal for permanent graphics.

    Reply
  5. p.s.
    In IE8 (version 8.0.6001.18702) …
    * Folder Icons Embedded in HTML >> Passed
    * Folder Icons using CSS >> Failed
    Don’t know yet if embedded graphics in CSS will fail, I’m expecting it will.

    Reply
  6. Another tip for the internet explorer workaround while not having to maintain a separate CSS file, is this:

    ul li {
    background: url(data:image/gif;base64,) top left no-repeat;
    }
    

    … where getBase64OrFilename() is your own function that detects if the browser is IE or not– if it is, it simply returns the filepath with quotes… otherwise it returns the base64 data string.

    Reply
  7. You say:
    Or you can use JavaScript to simulate data URL support in IE, but this method requires a fair amount of JavaScript code.
    I’m having a hard time finding any example code for this…do you have a reference?
    Thanks

    Reply
  8. Just thought I’d share, I created a couple of tools to help with data URI creation. The first one is a simple data URI generator and the second is a CSS converter that takes existing CSS files, looks for embedded images, and automatically replaces them with data URIs. These are both command-line utilities so you can make them part of your build (unlike duris.ru). More information:
    http://www.nczonline.net/blog/2009/11/03/automatic-data-uri-embedding-in-css-files/
    I hope these help.

    Reply

Leave a Comment