Image file vs data URI

Data URIs aren't new, but now, that IE7 is practically dead and IE8 won't be around for too much longer (fingers crossed), we can finally take full advantage of them without having to worry about browser support or spending time to create fallbacks.

What's the advantage?

The biggest advantage is that data URIs save requests. Requests are next to document size the biggest issue concerning page load speed. Less requests means faster page load.

How to use data URIs?

Once you converted an image, just place the data URI code where you used to place the image src:

<img src="/path/image.png" alt="">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYOUXAQgwAABFACmHqsnDAAAAAElFTkSuQmCC" alt="">

.image { background: url(/path/image.png); }
.image { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYOUXAQgwAABFACmHqsnDAAAAAElFTkSuQmCC); }

How to convert an image?

You can find quite a view online converters on google. I also created an easy to use drag and drop converter which you can find in the Tools section.