Nora Brown Design

Speeding up sites: CSS sprites

I’ve used CSS sprites for a long time, but I haven’t been maximizing their potential. In the past, I have usually exported each navigation button as its own image, including unhovered, hovered, selected, and/or visited states as necessary. But the real potential is in exporting the whole navigation as a single image, thus greatly reducing the number of http requests, which is Rule #1 for speeding up your site.

So with a new site I’m working on, I did a little experiment. I made both a single image, and a collection of individual button images, then implemented the necessary html and css and used YSlow to compare.

Results

Individual buttons

Single image

Conclusion

So the single image instantly reduces the number of http requests from 5 to 1, but the interesting thing is that the combined image also takes less memory than all the individual images put together. It’s a win-win! When I compared the overall load times of the two different set-ups, they actually came pretty much the same on average, but probably because the whole thing is really lightweight to begin with.