Performance using css sprites

What is the advantage of using css sprites?

• It reduces the round trip required to the server
• Increases performance
• On resource several uses

What is the disadvantage of using css sprites?

• Maintenance : If you change one image we have to change other image's css properties 

Sample sprite Images 

The Image on the right has width of 50 pixels and height of 100 pixels. 

First-Image : Top 50 pixels
Second-Image: Bottom 50 pixels


Css would be
.First-Image {width:50px; height:50px; background:url(images/sprite.png) 0 0px;}

.Second-Image {width:50px; height:50px; background:url(images/sprite.png) 0 -50px;}




Note:
We cannot have sprite images for all website images. Best use case would be for icon , footer menu images.