What it is??
Technique wherein small images are consolidated at one place and then that consolidated image is used to apply those small images around your application.
Whole magic is done by background position property. By using background position property the exact position of the required image can be identified.
Why to use??
The technique helps you to reduce HTTP request and thus performance gaining of your application.
When you look for optimization of web application you look around to reduce the number of HTTP requests.
So here if you have 10 different small images in your application then 10 different HTTP requests would be sent to fetch those images from server. Wherein when we use CSS SPRITE, all 10 images are consolidated in one image and then only one HTTP request is sent to fetch the images.
Where it has been used??
CSS sprite is now majorly used. Put your firebug (in Firefox) on and see the CSS of yahoo.com, aol.com, digg.com all are using CSS sprite to display small images.
When to use??
Typically the technique should be used to access small images.
How to make it?
Sprite images can be build in photshop or to make your life easier there are number of CSS SPRITE generators available on web wherein they ask you to upload your images and build sprite image for you with respective background position of particular image. I use www.csssprites.com
Useful Resources:
