Reducing Your Web Page Load Time With CSS Sprites
I knew about this technique in a general way but found an article through Digg that really explained it well. This article not only does a great overview, it also links to several other great articles on the subject, like this one.
CSS Sprites is a technique borrowed from video games. If you’ve got several small images you want to appear in the same spot and change based on some JavaScript event (hover, onclick, or really any other event), instead of using several separate .GIF files, put all the images into one file in a grid pattern, and using CSS’s background-position attribute to move the visible portion of the image around from one virtual image to the other.
The result is a dramatic decrease in the number of HTTP requests required to display the page. And the combined image takes up less space than the sum of the individual images, due to header and color map information.
