What are CSS Sprites?
How CSS Sprites work
CSS sprites rely on absolute positioning to locate parts of a large image to display when called. The image loads only once, reducing the HTTP requests from multiple to one. For example, a menu with six tabs and separate rollover images for up, over, and down states representing 18 images and 18 separate HTTP requests. The drawback is that you have to do a lot of math in order to define the location of each image on the page. Luckily, there are programs that will do it for you.
SpriteMe is a free bookmarklet that you can use with any web page. Add it to your bookmarks toolbar, load the page you want to create a CSS sprite and click the link. The program will generate an overlay on the right side of the page listing all of your images and information. Some images may be left out of the sprite box and there will be an explanation why, but you may disagree and try it anyway by dragging the link into the sprite box. Then you just click “make sprite” and the program returns a PNG image with your combined images and the css for your page. The most efficient way to use SpriteMe is probably to build your website as you normally would and then run SpriteMe for each page and let it do the heavy lifting for you.