image sprites- Optimize your webApp

What is an image sprite? If you need a number of images regularly to render your web-app on a browser, you can have those in a single image rather than having multiple images.This single image is known as a sprite image.

What you gain from this approach? It will take only one HTTP request to render all your images so you can reduce the time to load your web-app.This approach will give a better image compression also.

How to use image sprites,

Image Credit :- http://tinyurl.com/pqhmne5

Lets say you are going to develop a web-app with the use of above sample sprite.Lets assume this sample contains 60, 40X40 icons in a single 480X200 file.

If we require the facebook icon, we can use CSS to show the correct image by positioning the background:

#facebook{
left:80px;
width: 40px;
background: url("sprite.jpg") 0 0;
}