What are CSS Sprites

CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image.

This technique can be very effective for improving site performance, particularly in situations where many small images, such as menu icons, are used. The Yahoo! home page, for example, employs the technique for exactly this.

Gotchas

There are a couple of really annoying browser bugs to watch out for when creating CSS sprites.

Opera

Opera (at least as far as version 9.0) won't recognise a background position greater than 2042px or smaller than -2042px using that boundary value instead. The tool takes care of this by creating new columns within the image output each time the vertical limit is reached.

Safari

Safari has a problem with repeating background images. Fortuantely this can be easily solved by specifying a large enough horizontal offset value (configurable).

Further Reading

A List Apart published an article entitled CSS Sprites: Image Slicing's Kiss of Death which explains the concepts behind CSS sprites. If you're new to this technique we'd strongly suggest heading over to A List Apart and taking a look.