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.

4 thoughts on “Easy image data URIs with Compass”

    1. Hey Jitendra, I’m not sure that I understand the question. I don’t think you would use inline-image() together with image-url(). One is for generating a data URI (where the image is embedded in the stylesheet) and one is for generating a path to a normal image file.

      1. You got my question right. It would be good if we can use both.
        But I think problem you mentioned
        “but in some cases sprites didn’t work because the element was larger than the icon and other icons were showing through.”

        Can be solved by using “$mysprite-layout:diagonal;”

        See here for more details http://compass-style.org/help/tutorials/spriting/sprite-layouts/

        Maybe you know this already. I just shared in case you don’t know about it

Leave a Reply

Your email address will not be published. Required fields are marked *