Any front end developer worth their salt will know that it’s important to reduce load time on a website. One way is to reduce the number of http requests the page has. Sounds simple right? Well guess what…it is! You can reduce http requests with data URI’s in no time at all.

Data URI’s have been around since 1998, and it’s a bit of a mystery why they are not widely used, especially on large sites. You are basically embedding the http requests into the site rather than loading the markup, then grabbing each image, video or whatever else one at a time. So it’s a good idea to get into the habit of implementing them into your projects in the early stages of development, and here’s a quick tut on how to do so.

You may have an image that you want to display, so you’d use your trusty <img> tag like so:


<img src="http://www.moosch.co.uk/wp-content/uploads/2012/07/paw.gif" alt="paw print" title="paw print" />

And you’d get the image once the page is loaded.

Fantastic huh? But what about using these Data URI’s? Well it’s super simple. Your <img> tag will look like this:


<img src="data:image/gif;base64,R0lGODlhCgAKANU1ACQkJPv7+3Nzc6ysrKmpqb29vQoKCgUFBQcHB7KysmdnZ3h4eEFBQUNDQ01NTeHh4WRkZGtra8zMzPn5+YqKihUVFSMjI/Ly8p6enlFRUSgoKCkpKWlpaSoqKr+/v3l5eR8fH8bGxmZmZiEhIcXFxf39/fr6+hsbG1ZWVmVlZQMDA6ioqFRUVM7OzltbW83NzT09PQ8PD/j4+BEREQAAAP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4zLWMwMTEgNjYuMTQ1NjYxLCAyMDEyLzAyLzA2LTE0OjU2OjI3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkRDMjU1RTc5Q0IzNDExRTE4REJGRjkwQjg4ODI0MzNDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkRDMjU1RTdBQ0IzNDExRTE4REJGRjkwQjg4ODI0MzNDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6REMyNTVFNzdDQjM0MTFFMThEQkZGOTBCODg4MjQzM0MiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6REMyNTVFNzhDQjM0MTFFMThEQkZGOTBCODg4MjQzM0MiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQBAAA1ACwAAAAACgAKAAAGUMBabTUr1CIioRBFawxotEutVBPQOgtaRQgDkDSUwQEjec1oH6XMo5pBaJwWw/FI0UYmQiEGBQgQBDUBG1BQChNCCYVQBgFCISAWLC4nGUJBADs=" alt="paw print" title="paw print"

paw print

Now that looks crazy doesn’t it, but don’t worry it’s really not. All I did to get this was use a Data URI converter I found online. There are quite a few out there to use but they all mostly do the same thing. Chris Coyier from CSS-Tricks recommends websemantics.co.uk which is nice as it gives you the code for css, html and raw data, but you must upload the image. So if you’re updating an existing site, and you just want to use the image locations I suggest the simplicity of dopiaza.

So there you have it. Nice and easy right? Well not quite. If you are concerned about IE support, which as a front end developer you should be, you’ll find this doesn’t work in IE5-7, but it does work in IE8+. So you have a few options, either ignore it and don’t support anything less than IE8, use progressive enhancement to only show text for IE5-7 and ignore images. If you are implementing data scheme in your css, you can easily support the old IE’s by simply using IE Only stylesheets.

But if you really must support the older IE’s this post by Stoyan Stefanov will teach you all you need to know. As for me I don’t bother supporting IE5-7 as Microsoft has dropped support for them, and if the creators have lost interest, we all probably should.