There might be a industry standard name for this process, but I call it using Doom Tiles. If you ever hacked around on the original video game Doom (or even Quake), you’ll get the reference I think.

What is boils down to is loading one large graphic for all the icons on your site. Or at least, grouping sets of icons onto a large graphic, and loading the whole set at one time.

The reason this technique is useful is because opening and closing an HTTP connection from a client to a server can be a very timely process. If you run ySlow or Safari’s Network Timeline, you’ll find that a lot of HTTP connections can really hurt your site’s performance. It gets an order of magnitude worse when you are building an iPhone web app, or an app that goes over a cell network.

Here is a step by step on how I use this a technique (and like I said other people have probably done the same thing but call it something else).

First, it makes things a lot easier if you define icon / asset sizes up front and stick to it. In this example I am choosing 50×50 for simplicity.

Fire up your favourite image editing software, and create a 50×50 gird using the Grid or Guide tools. I use Pixelmator (it’s powerful and it’s inexpensive).

Then go nuts on it with your über graphic designing ability:

(Don’t be upset if your art doesn’t look as good as mine. I am a professional.)

Once you have your Doom Tile, you can use it in your html by using the background-position CSS attribute. You can use background-position to choose which part of the image you want to display. Remember that your values are going to be negative because 0,0 is the top left of the graphic and you’ll need to move the graphic left to change the tile you want to show – “pull it left” for lack of a better term.

For example, if we wanted to show the second tile on the first row we would need to shift the graphic to the left by subtracting 50 from the X axis. Something like this:

   ...
     img.example {
            height: 50px;
            width: 50px;
            padding: 0px;
            background: url(DoomTile.png) no-repeat;
        }
     
     img.example-2 {
            background-position:  -50px 0px;
        }
   ...
   <div>
        <a href=""><img src="" class="example example-2" alt="" /></a>
    </div>

This defines the image’s view port to be 50px by 50px, sets the background to our Doom Tile, and then moves the background image offset to -50px on the X axis. This moves the second tile into the image’s 50×50 view port. Likewise, if you wanted to move to the second row you would subtract 50 from the Y axis.

You can download a working example of this here (only tested in Safari, but should be fine in any modern browser). This is what the example looks like when run:

You can also use this for image hovers or for simple animation (which is how it was used in Doom). The example also has a simple demo of animation using the second row of tiles.

Even though this is a simple example, you can see by Safari’s Network Timeline why this is a helpful technique. The example site only makes two connections (not including the XHTML logo), but displays 5 graphics and an animation.