[size=12]CSS Image Sprites[/size]
[tab='What are CSS Image Sprites?']
[tab='What is a(n) Image Map?']
CSS Image Sprites are basically a way to reduce the number of packets and http requests needed to return images. Image sprites use an 'image map', which we will go over next. The less requests needed to be sent, the faster the images are downloaded, thus the page loads faster than it would with 50 different image requests. Say you have 50 images. Now, they can either be 50 different requests, or you can put them on all on an 'image map' and reduce the requests to 1 for all 50 images. Which is faster? You tell me. Now, there is no doubt it may take time to develop these image maps, but for the sake of your users, its useful if your going to be using alot of images.
[tab='What sites use Image Sprites?']
An Image map is mainly 1 image, consisting of other images all put together horizontally and vertically. Think of it as a grid if you will. You can use this one image for all your images, and its not that hard to select each individual image. With some CSS Background x and y manipulation, you can select each and every one of your images individually.
You might be surprised, but many popular sites use image sprites. For example, Google, YouTube ( Owned By Google i believe ), Yahoo, Facebook, Myspace, and others use these sprites to feed the images to the users faster.
This is not a tutorial im writing. It explains what they are. For more information i suggest trying the link below that Armageddon posted. Thats where i learned how(: