CSS Sprites: why 8-bit game design still kicks ass

In keeping in line with Yahoo!'s "14 rules", I've decided to convert a few projects that I'm working on have them use CSS Sprites instead of icons. This speeds up the user experience in several ways, so let's address the WHY first.

1. Size: This is the first argument that is usually made, so let's get this out of the way. Run an experiment. Grab a set of, say, 10 icons. Calculate the sum of their file sizes. Then open up photoshop, throw each of those icons into an image (on a grid, so you can still see them), and save as a flat file (whatever format the icons are in). Compare the size total. The reason the new grid of icons (aka 'sprite') is smaller, is because the extra data stored in the image (information about the colors, compression type, etc...) takes up space. Whereas in the sprite, all that data still exists, but only once.
2. Speed: The single HTTP request will make your page load faster. Think of it this way, if you have a meal planned, and you have to bring catsup, mustard, mayo, pickles, onions, tomatoes, and lettuce to the table from the fridge, you have a choice. Since you only have 2 hands (browsers can handle 2 http requests at a time), you can bring them two at a time. Or, you can put them all on a tray, and bring them all at once. That, essentially, is what you're doing with a CSS sprite.
3. Better Code: A sort of hidden advantage to the CSS sprite for me is the fact that it almost ensures that you write your image handling in an external CSS doc. That means you'll have to actually think about how to handle each image, instead of throwing them into an image tag, and letting the browser do the work. Remember, the more work you do, the less your users' browser will have to.

Now, let's talk about how to do this...

I put together a sample using a sprite of some social network icons. Here's the whole schebang...

First, let's look at the sprite we're working with:

Now let's talk about what that does. First, we'll tackle the simple html.

All we're doing here is creating a list, and assigning an id. This isn't actually necessary for our demo, but you probably don't want these rules to apply to every list on your site, so it just makes sense to apply our rules to a specific list.

Next, we simply attach a class to each list item that we want to display an icon. Now the css.

First, this sets the sprite as the background image to every list item in the #socials list. We also set each list item, set the background to no-repeat, and set a simple padding to the item itself, and get rid of the list style.

Next, we simply adjust the background position, to bring up the appropriate section of the sprite. You'll also notice that I've added a hover icon to the .digg class.

This method is the simplest I've seen of implementing CSS sprites. However, there are lots of variations. Here's a couple more sites that will help if you're interested in reading further

• Our friends over at ALA have a great tutorial on CSS Sprites. You should definitely check it out.
• A nifty little tool over at Website-Performance lets you upload a buncha files, then generate your CSS Sprites engine. Very cool. If you have any significantly complex opacity in your pngs, then you won't wanna use this engine, as it'll tend to over-compress some of the files. However, for non-transparent images, or basic gif shapes, it seems to do the trick just fine.
• HTML Optimization - It ain't pretty, but it works.