CSS Image Sprites for improved performance and user experience

Web Development Tools and Techniques

If you’ve been developing for the web for a while you may have heard the term “CSS Sprite” or “Image sprite”.  If you don’t know what a sprite is, it’s high time you learned.  I love sprites because they are a technique that typifies the beauty of web development to me: a balance between technology and human factors.

The benefits of spriting include a faster and more responsive user experience, reduced network traffic and server strain and improved code maintainability. What’s not to like about all that?

Read on after the cut to learn all about css image sprites.

The core concept of using sprites is to combine small images into one larger image.  Then, using the background attribute on HTML objects, displaying only the portion of the image that you need.

Imagine a cartoon strip from the newspaper if you will.  Let’s say it has five frames, each 2″ by 2″, printed from left to right. Now imagine a large piece of cardboard with a 2″x2″ square cut out of the middle.  If you were to tape the comic strip down to the table and place the cardboard on top; you would only see one frame at a time.

We can achieve a very similar effect on the web by creating one image with all the icons we might need on a given page.  I like to align those icons vertically with the top of each icon offset by some easy to remember number of pixels, say 100.

After we’ve created that image (the comic strip) we need to create our “cardboard”.  In this case it will be an html elment with a height and width defined in css. Something like this

html:

<span class="icon open" />

<span class="icon close" />

css:

.icon{
    display:block;
    height:16px;
    width:16px;
    background: url(samplesprite.gif) no-repeat;
}

.open{
    background-position: 0 0; //shows us the top image in the sprite
}

.close{
    background-position: 0 -50px; //shows us the second image in the sprite
}

See this sample css sprite here

The benefits of sprites

With traditional images the browser must make a separate request for every image that displays on a page. At scale this causes a lot of unnecessary overhead on the server side and lots of extra data going across the wire. Additionally, browsers don’t make these requests until the image is needed.  For example, if you’re using the ‘:hover’ css psudo-class to give an element a rollover effect, the browser will wait to download the rollover image until the element is moused over.  This delay makes the rollover “flicker” the first time a user activates it.

Beyond making the site load faster and react more quickly to user inputs, the use of CSS sprites makes maintaining a website a much simpler affair.  For example, if one wanted to change the icon set that they were using on a page using sprites, all they’d need to do is create another sprited image using the same offsets and change the reference in the css to point to the new image. It also makes the markup much more readable by using human friendly class names instead of inserting lots of image paths in <img> tags.

So go forth and sprite!

MT @ September 17, 2008