I’ve found quite a few articles and tutorials explaining how CSS sprites are basically the be-all end-all of Web development, going on and on about the idea that all of the icons you use on your Web site should be stored in a single file, reducing the amount of time it takes to load them individually and reducing the number of times a browser has to request something from your Web server.
It’s a great idea, in theory, but it’s not always practical. CSS sprites are extremely useful when you are working with fixed-size (height or width) elements on your site. However, they can be extremely tricky to implement (and generally not worth the effort) when you’re dealing with items that have dynamic heights and widths.
When you are dealing with fixed widths or heights, though, CSS sprites can be fantastic, especially if you have a slower Web server or if a large number of your users have slower Internet connections.
The idea behind CSS sprites is to basically create a single image file that contains multiple icons or multiple background tiles. They are especially useful when implementing mouse over changes. For instance, let’s say you are using a background tile on your navigation menu. When users place their mouse pointers over an item in the navigation menu, you switch to a different background tile to change the appearance of the navigation item. The CSS might initially look something like:
#navitem {
height: 50px;
width: auto;
background: url(bg1.jpg) repeat-x;
}
#navitem:hover {
background: url(bg2.jpg) repeat-x;
}
bg1.jpg
bg2.jpg
The CSS above will automatically switch the background image from bg1.jpg to bg2.jpg when the user places the mouse pointer over the navigation item. Unfortunately, the first time you mouse over the navigation item, the browser needs to make another request of the Web server, and the user has to wait for the image to load.
However, if we implement a CSS sprite for the background change, there is no waiting when you mouse over the item. It immediately displays the new background image. The image does not need to reload, it simply moves. To implement it, you would create a new image that combines the two previous images. Since this particular item is a fixed height, we will stack them on top of each other vertically. If we were dealing with something that was a fixed width, instead, we would stack them horizontally.
Our new CSS will look something like:
#navitem {
height: 50px;
width: auto;
background: url(bg-sprite.jpg) repeat-x 0 0;
}
#navitem2 {
background-position: 0 -120px;
}
This CSS uses the same background image for the normal item and for the hover state. All we are doing is moving the background image.
For illustrative purposes, I have made all of the images I’ve used in this post 100px wide. However, in reality, when using a repeating gradient, you really only need it to be a single pixel wide.
The use of CSS sprites is also extremely useful when you are displaying icons on your Web site. However, you still need to keep in mind that those items need to be basically a fixed height or width (or, at the very least, a maximum height or width). For instance, on one of my Web sites, I use different icons to indicate what type of page or document is located at the end of each link (external links, e-mail links, Word documents, PDF files, etc.). Because the links can be any length (sometimes spanning up to two or three lines, other times using enlarged text, etc.), CSS sprites are not extremely useful for those circumstances.
However, if, instead, you are using icons for fairly consistently sized items, CSS sprites are great. You might even want to experiment with using CSS sprites for dynamic buttons, using a different button for the standard appearance, the hover appearance and the active appearance. Good luck, and let us know when you come across good examples of CSS sprite usage.