What is CSS Image Sprites?

An image sprite is a collection of images put into a single image.

What is advantage of using image sprite?

1. Reduce multiple server requests.
2. Sprites reduce the number of server requests and save bandwidth.
3. Another advantage of sprites is that you can keep all your images in one location and in some cases it makes more sense (for menus and so on).

A real life Example
If you use sprites for a “mouse over” display, the user won’t experience image disappear for a second… and it looks really good when you have heavy graphics in your site.
If you change the image instead of just moving the sprite around it will load a new image and the loading time can be visible to the end user.

CSS Image Sprites Example Code

.NotGood{
 
  background:url(sprites.jpg);
 
}
 
.NotGood:hover{
 
  background:url(spritesHover.jpg);
 
}
 
.Good{
 
  background:url(sprites.jpg) 0px 0px;
 
}
 
.Good:hover{
 
  background-position:15px 0px;
 
}

You can use Adobe Photoshop or any other image editing software to determine which area needs to be display.