Perezium

Smarter Sprites: Inline Image Function with Sass

This is Part 1 of my 5 part series: “From good to Great, 5 Things you didn’t know Compass could do.”

CSS Sprites has been a long time standard practice for efficiently implementing lots of imagery that we include in our designs today. The primary reason for using CSS sprites is to decrease the number of server requests that our client-side code will make to our server down to a single request. Lets look at how we would implement a simple CSS sprite pattern in compass today:

.icon-sprites
  background-image: image-url("icons/sprite.png")
  height: 35px
  width: 35px

#some-icon
 background-position: -12px 0px

#another-icon
 background-position: -50px 0px

That code is pretty concise, and accomplishes our goal of making a single request to the server for all our icons. But, what if we could make zero requests to the server for this sprite? With compass, you can do this with one minor change! Introducing Compass’s inline image function

.icon-sprites
  background-image: inline-image("icons/sprite.png") /* ! */
  height: 35px
  width: 35px

#some-icon
 background-position: -12px 0px

#another-icon
 background-position: -50px 0px

We simply change our declaration from image-url, to inline-image and Compass embeds our image into our stylesheet directly. Here is the CSS file that is generated based on our little change:

.icon-sprites {
  background-image: url('data:image/gif;base64,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');
  height: 35px;
  width: 35px;
}

NOTE: This is all fine and good, but remember, there is a tradeoff occurring when you embed your images into your stylesheets. HTTP is smart enough to attempt to load multiple images, stylesheets, javascript files, etc in a concurrent nature (usually not more than 2 a time), so by integrating the overhead of this file into your stylesheet, you are effectively increasing your stylesheet download time to whatever it weighs + every image you are inlining. In some cases, this is a great thing, especially if your icon sprite is less than 4KB.

So, use your best judgement and keep an eye on your stylesheet file size when using inline-image, this can be an incredibly useful trick for speeding up the appearance of your pages, depending on their design.