Using Data URLs Effectively with Cascading Style Sheets

Very old, from 2009

Data URLs are a clever way of embedding images in HTML. Instead of linking to an image stored locally on the server, the image is provided within the URL itself as a base64-encoded string of data preceded by a mime-type. In this article I discuss how Data URLs can be effectively used to optimize website loading times and performance.

1. Introduction to Data URLs

Images within HTML documents are usually linked with a tag such as this one:

<img src="images/myimage.gif">

In this case, the image tag src attribute specifies an external resource. When rendering the page, the browser sends an HTTP request for every external resource, tying up valuable network resources. Most browsers limit themselves to about four concurrent requests, which means that if a document requires many external resources, the requests will be queued, with associated performance degradation. With Data URLs, the image data becomes part of the HTML document itself, as exemplified by the tag below:

Below, you see the same image side by side. The instances, however, are not the same. The one on the left is included in the traditional way, by including an external resource, the other by way of a data URL.




As of writing, Data URLs are supported by all modern browsers, including (but not limited to) Firefox (and other Gecko-based browsers), Apple's Safari, Konqueror and Opera. Only Microsoft's woefully inadequate Explorer lags behind, with only IE8 adding recent support. The RFC specification dates back to 1998.


2. Why Data URLs are a Good Idea

There are several circumstances where a Data URL may be useful, as opposed to traditional external resource referencing:

  • In environments where access to external resources is troublesome or limited
  • Where images are dynamically generated by a server-side program on a per-visit basis
  • Where the size of the image is so small that the overhead of a whole HTTP request is saved by placing the image inline within the HTML.

Data URLs also have their disadvantages.

  • Base64-encoded data is about 4/3 of the original data size, or about a third larger than equivalent binary images.
  • Images specified as Data URLs are not cached by the browser, which means that they have to be downloaded every time the image occurs in a document. This is inefficient, especially if a single image is displayed over a wide range of documents within the website.

There are, however, circumstances where the disadvantages of using Data URLs can be entirely negated. That is the primary subject matter of this article.

3. Combining Data URLs with CSS

A first reaction to the notion of Data URLs might understandably be "Why bother with the unpleasant hurdle of converting images to and from base64 encoding, and messy HTML, when it doesn't even have performance benefits all of the time?".

Certainly, there is no denying that caching is an important factor in browser performance -- how do we get the Data URLs to enter the browser cache? The answer is: via Cascading Style Sheets. The url operator in CSS allows us to specify background images for elements -- the browser doesn't care what kind of URL it is, as long as it is capable of getting the data therein. It is thus possible to embed the Data URL-encoded images in an external stylesheet. Stylesheets are aggressively cached by all major browsers, for understandably performance reasons.

Let us imagine that we have a small div element that we wish to provide with a mild gray sideways-striped background -- moderately popular amongst today's web designers. The typical approach is to create e.g. a 3x3 pixel image, save it as a small GIF or PNG image, and provide an URL to it in the background-image CSS attribute. Using a Data URL is an efficient and viable alternative, as we shall see.

Observe the following CSS class:

.striped_box
{
	width: 100px;
	height: 100px;
	background-image: url("data:image/gif;base64,R0lGODlhAwADAIAAAP///8zMzCh2BAAAAAAALAAAAAADAAMAAAIEBHIJBQA7");
	border: 1px solid gray;
	padding: 10px;
}






We can then include the following in our HTML document:



<div class="striped_box">
Here is a happy striped box
</div>




This produces the following striped box:




Here is a happy striped box




In this case, the use of a Data URL is entirely beneficial.  The overhead of an extra HTTP request is circumvented -- the striped background image for the box is cached along with the rest of the CSS, and can be used again and again without the image being re-transferred repeatedly.  Provided that the image is not too large, and that it is not repeatedly used within the CSS document, Data URLs can be a powerful tool to speed page loading times.





4. Creating Data URLs from images



Now that the benefit of using Data URLs has been demonstrated, we turn to the question of how to create them from images.  I have programmed two tools that generate Data URLs from images -- one, a simple Mac OS X Desktop application, the other a web application usable by all platforms equipped with a browser.  I provide these tools on this website free of charge.






Conclusion



The lack of support for Data URLs in all but the latest version of Internet Explorer,  which is unfortunately still used by about 80% of web users, remains a detriment to the widespread adoption of Data URL web technology.  One can only hope that the inroads made by superior browsers such as Firefox eventually manage to change the market demographic, or that Microsoft gets off its lazy behemoth ass and releases a decent browser.