Using CSS Sprites

CSS sprites were introduced to the web development world in 2004 by Dave Shea in his article CSS Sprites: Image Slicing’s Kiss of Death. The name itself comes from the old 8-bit days, when tiny bitmaps were shuffled around the screen pretending to be spaceships, monsters and heavily pixelated heroes.

Back then, sprites were often collected into a single large image as a grid of graphical bits and pieces, and the code simply grabbed whatever it needed using coordinates. Primitive but effective. Much like most things involving 8-bit computers.

The same idea works surprisingly well on the web. Instead of loading a small army of individual images, we load one larger image containing all of them. Fewer images means fewer HTTP requests, which means faster page loads and less of that charming flickering effect where buttons briefly disappear while the browser desperately tries to assemble the page.

The trick is the CSS property “background-position”. Consider this very simple markup:

And the corresponding CSS:

The nav.gif image contains a grid of different graphics. By shifting the background position, we expose only the part of the image we want.

Nothing is actually moving, of course. We’re simply sliding a larger image around behind a small window and pretending everything is much more sophisticated than it really is. A principle on which a disturbing amount of web development appears to depend.

The example above is deliberately simple, but it demonstrates the basic idea. Dave Shea’s original article goes into considerably more detail.

There are other possibilities as well. In 2003, Douglas Bowman published Sliding Doors of CSS, demonstrating a technique for creating flexible CSS tabs. Combine sliding doors with sprites and you can build flexible interfaces while keeping the number of images and HTTP requests under control.

Sprites can also be used to create CSS-based image maps, where different areas of a larger image become interactive without chopping the thing into dozens of separate files.

Clever stuff. But, as with almost every clever technique in web development, there comes a point where clever quietly puts on a fake mustache and becomes unnecessarily complicated.

CSS sprites are not automatically an improvement. Some images simply don’t fit comfortably into a grid. Variable-width elements such as input fields can become awkward. A gigantic sprite may save HTTP requests while creating a hefty download and consuming more browser memory when decompressed.

And then there are the browsers. This is web development, after all. Eventually someone will open the page in a browser you had hoped was extinct, and your elegant little sprite system will reveal itself as an elaborate archaeological dig involving CSS hacks, strange offsets and language normally reserved for malfunctioning household appliances.

So use sprites where they make sense. They can reduce HTTP requests, eliminate flickering and improve loading performance. They can also add another layer of complexity to a project if used simply because someone told you sprites were clever. As always, the best technique is the one that solves the problem without creating three new ones.