Using data URIs to reduce http requests

If you’ve ever tested your website with yslow, you would have probably noticed that reducing http requests is among the most important step to take in speeding up performance.  If your site serves a lot of small images, yslow will recommend combining the images into image sprites. But image sprites are often difficult to implement even with tools like SpriteMe. An alternative is to use data URIs which embeds the images into the html or css document with no need for a http request. You can read more about data URIs here and here.

One of the downsides of data URIs is that it’s not compatible with Internet Explorer before IE8 so a conditional test must be used to detect when to serve them. In this example, I’ll use data URIs to remove five http request for the social icons in the header of this site.

This platform won’t allow me to publish code so take a look at this sample.txt file to see the sample code.

The test for browser version is actually a hack I learned here. There is an online tool you can use to convert images to data URIs. If your site is serving up a lot of small images, data URI maybe just the trick to speed up performance. There are some downsides to data URIs so read up about them before proceeding.

 

I can’t display code on this blog so go to this page and hit CTRL U to see the source code for the header. I’m not a programmer so I can’t answer any of your questions but feel free to comment if you have any suggestions or questions. Someone more knowledgeable than me might just give you the answer.