CSS Sprites are a technique made popular back in 2004 by Dave Shea. In short, creating a sprite means combining a bunch of images into one, then using CSS background positioning to display images individually. Built properly, sprites cut down on page weight and minimize http connections required in order to load a web page. Bottom line: it makes things a lot faster.

Still, using sprites isn't all that mainstream because it takes longer to code a website with them, and making regular updates can be tedious without proper planning. For many smaller sites, the benefits simply aren't overwhelming enough to invest the additional time.

If you haven't been using sprites on projects for whatever reason, my hope is that this case study will tip the scales for you.

The website we worked on for the case study is ErgonomicsMadeEasy.com. We created this site a couple of years ago with only one sprite for the navigation. After improving the home page with sprites, image optimization and roughly five hours of time, here are the results we saw:

Highlights

• Total page weight decreased by 270.7k or 42%
• 55% fewer HTTP calls
• Page loaded in 2 seconds, a 70% improvement
• Total number of images decreased by 45 or 62%

Four total sprites come together on this website, three of which were new. The navigation was already a sprite, so it remained the same. Here is a link to see each:

• sprite-icons.png (10.1k, 15 total images)
• nav_bg.png (21.4k, 3 total images)
• sprite-tabs.png (2.4k, 2 total images)
• sprite-footer.png (4.8k, 5 total images)

Why four sprites and not one big one? Two reasons:

1. When optimizing images for minimum file size as a PNG-8, the image quality deteriorates with more color diversity.

2. Big huge sprites are typically very hard to maintain.

Non-sprite optimization

As part of this project I also did two other things not related to sprites that made a nice dent in the overall file size on the home page:

1. I highly recommend saving any JPG images with Adobe Fireworks CS4. Don't ask me why, but the process is completely different from how Photoshop saves JPGs for web. It's quite common to save 20% or more in file size by using Fireworks over Photoshop. However, I still use Photoshop for PNGs.

2. I noticed about ten background images that were being loaded on the home page through the stylesheet, which were only necessary on category pages. So I took that CSS code and put it in a separate stylesheet that is only loaded on categories. If you have large background images being referenced in your stylesheets that are only necessary on a couple of templates, I recommend putting them in a different stylesheet and only calling it when they are needed.

What Now?

These numbers should be proof enough that sprites play a crucial role in maintaining a fast website. Not only that, but running your own tests and optimizing is important before launching a site.

It takes time to understand the right uses for sprites, but the only way to learn is to work with them. Here is a collection of my favorite articles on creating sprites:

• A List Apart: CSS Sprites: Image Slicing's Kiss of Death (where it all started)
• Smashing Magazine: The Mystery Of CSS Sprites: Techniques, Tools And Tutorials
• CSS Globe: Creating easy and useful CSS Sprites
• mezzoblue: Sprite Optimization
• Tutorial9: Building Faster Websites with CSS Sprites

Lastly, I don't recommend any auto-magic sprite generators because they don't account for some important criteria like images that repeat or may not have a defined width/height. Create/code your sprites from scratch and I believe you will get much better results in most cases.