Easy image data URIs with Compass

I just found a great feature of Sass / Compass for automatically generating data URIs: the inline data helper.

In my current project we’re using sprites for most of our icon images, but in some cases sprites didn’t work because the element was larger than the icon and other icons were showing through. In these cases we were using standard background images instead of sprites, but this meant we had an extra HTTP request and the hover images weren’t being preloaded.

Luckily Sass came to the rescue!

We simply changed our background image properties from this:

background-image: url("images/icons/expanded.png");

To this:

background-image: inline-image("icons/expanded.png");

And the result was this:

background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAMAAABFNRROAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF7RcfAAAA1Qe9yAAAAAJ0Uk5T/wDltzBKAAAAHklEQVR42mJgQAWMCICdx0AcD24cifpw244MAAIMACcaAG3Sx6WHAAAAAElFTkSuQmCC');

Data URIs are supported in IE8 and above.