What are CSS Sprites?

It is a way of combining small image pieces into one image, to reduce the number of HTTP calls made for image resources from your server while browsing the page. This process is call css sprites. When combining images into css sprites, you need to look into the fact of final combined larger image, that should not be bigger. Next step assigns this generated image to relevant page elements by using background-position CSS property. CSS background-position can then be used to shift the visible area to the required component image.

CSS-Sprite image
CSS Sprite can be very effective way of improving site performance, particularly in situations where many small images, such as menu icons, are used. The Yahoo! home page, for example, employs the technique for exactly this.

Places where you should consider this technique is Menu hover, Button Hover, to avoid Big background images, In rounded corner box top and the bottom part are some of the examples of how you can use it. Every single request that you stop from the server will increase performance. Long run CSS Sprite will effect search engine crawlers and robots to navigate faster your site.

Above image shows how to make a CSS Sprite image. It caters for three scenarios at one go. Instead of six http requests to the server with one request you will be able to bring the required images as one.

Now comes the evaluation of talent. You need to use css background-position lift the images into correct positions by giving the vertical position values. You need to be precise with each image height, it will play a major role  in align hover and normal states of the image.

Here is an example of how you can use CSS sprite with rounded corner box.

Here is another example of how you can use CSS Sprites for background Images.

Happy coding..!