Friday, November 6, 2015

Performance using css sprites

What is the advantage of using css sprites?

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 pixelsSecond-Image: Bottom 50 pixelsCss 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.