CSS Sprites

Sprites provide designers with a way to reduce the amount of server requests generated by a page. They involve taking several different images and combining them into one and then selectively displaying the various parts of that image instead of displaying each image separately.

The benefit in this arrangement is that there is only one server request. Imagine it this way: you have four buttons with one roll-over state for each one. This means that, when someone visits the page, they have to download all four buttons plus a roll-over version for each of them. Using a CSS sprite, you combine these images into one large image so that the user only needs to download from the server once. This method allows you to vastly reduce the amount of request the user makes to the server and, therefore, the amount of time it takes to download the page.

Making it Work

Making CSS sprites is generally something you'll want to do from the beginning phases of the site construction. It's done in an image editor and the images are laid one over the other, displacing each one pixel from the last, in your photo editor. The end result is that you have a composite image that is uploaded to the server. You call for each image by changing the Y value in the positioning element of the tag.


The only real disadvantage with using sprites is that the graphic design is a bit more complex. Rather than just dumbing the buttons and their rollover states into a folder for your nav menus, for instance, you'll have to create a composite image of all of them. This extra work, however, means that there is much less draw on the server and that users get a faster experience when they're visiting the site, particularly if it's a large site with a lot of image content.