Images are essential parts of web-pages. Sometimes a single bar or section might contain multiple images that we won’t recognize easily. But loading a large number of images can cost a lot of time and server requests. CSS resolves this issue with what is known as an Image Sprite.
In simplest words, image sprite can be described as a collection of images that are put into one single image. Image Sprites help you save both, the bandwidth and the number of server requests.
Instead of using different images we just show the desired part of the sprite. So, the simplest usage of an image sprite will look like:
background: url(spriteImg.png) 0 0;
Here, we have set the dimensions of the box and the position of the image sprite to show the exact part we want to be seen.
Using images for navigation list on web pages is a popular option. Instead of using different images for this purpose, we can create an image sprite and use its different parts to show different options on the navigation list.
You can also add the hover effect to these images as per required. Here’s a sample code for the image sprite with and without hover:
background: url(spriteImg_hover.png) 0 0;
background: url(spriteImg_hover.png) 0 -45px;
Here, we have created a sprite for both the normal and hover images together. Therefore, when we set the position to be 45px above the normal image, we can see the hovering effect.
Sprites are most useful in case of small images whose dimensions are known. Sprites for large image may be difficult to handle. Therefore, sprites are mostly used in cases for images that are used on almost all the web pages.