CSS Sprites

In the old days of 2D computer games, graphics were drawn on screen using sprites. As games and their graphics got more complex, memory and speed issues began to surface, and as a result a technique using sprite maps was invented, which would place all animations for a character into one image, and then use mapped positions to display the correct frame of animation at any time. So can the same method be applied to websites, and what are the advantages?

Having a website with many images can have a large overhead on loading times with the browser having to request each image individually from the server. Placing multiple graphics into the same image file would mean there would only be one request to the server. It’s natural to think that increasing the image dimension would actually mean it would incrementally increase the file size too; but one image means that there is only one colour table, one set of meta properties and also your image software may be able to match patterns between the two images and reduce file size during compression.

The technique of placing multiple images into one image file is known as ‘CSS Sprites’, and it can be very useful for smaller icon sets and for buttons where you need to quickly load the hover state graphic.

Using a button as an example, potentially you could require an image for multiple states. For this example we’ll use the image in the post with the following three states:

• a normal button
• a hover button
• a disabled button

By producing one image, we have reduced the number of calls to the server by a third. We can then use CSS to switch between the different image states. In this CSS example, our three buttons are 25 pixels high each.

.button { background:url(images/button.jpg) no-repeat 0 0 }
.button:hover { background-position:0 -25px }
.button:disabled { background-position:0 -50px }

Go have a look at a website you’ve created in YSlow, and look at the ways CSS sprites could help you speed things up a little.

Tags: CSS Sprites