Santiance

I’m kinda disappointed in the web development community for being such a lumbering beast. New ideas and methods come out regularly that are proven to work great, but often times we fail to adapt if there isn’t a lot of external pressure.

CSS Sprites, simply put, are a win-win. Steve Souders explains this well in his High Performance Web Sites: 14 Rules for Faster Pages on YUI Theater. I think the most critical element here is that it significantly cuts down on HTTP requests, which are the serious bottleneck due to a standard limit of 2 per unique domain name.

A common complaint about this method is that combining all the images into a larger one creates a “waste of space”. Indeed there will be small gaps between your images, however:

• You should be using PNG (8-bit if you can) for this image. These image formats use lossless compression, and long contiguous areas of empty space will be compressed so well it won’t affect the size of the resulting file.
• Multiple images inside a PNG-8 will share the same palette and may reduce the file size. Before compression this is about 0.7 KB per image. Creating just a 3×3 grid of CSS sprites this yields 20KB of savings.
• The compression dictionary will be much better with multiple images. With a single 16×16 icon there likely isn’t many data patterns that can be used to reduce the size of the file. With multiple images you’re compression ratio will become higher because there is more similarities to take advantage of in the image.

Cutting down on file size is always nice, but really it’s the fact that you’ll be making much less HTTP requests to the server. Anyone using Firebug will notice that most of the time is spent establishing a connection to the server. This is because many servers have a limitation on concurrent HTTP transactions.

Don’t forget to put different types of content on different sub-domains if you have that option. Stylesheets, scripts, and images can all be on separate domains, although it can be tedious to get stylesheets and images on separate domains since you’ll lose relative pathing.