CSS Image sprites

CSS Image Sprites are a means of combining multiple images into a single image file for use on a website, to help with performance.

Sprite may seem like a bit of a misnomer considering that you’re creating a large image as opposed to working with many small ones, but the history of sprites, dating back to 1975, should help clear things up.

CSS Image sprites-Explanation

Sprites are two-dimensional images which are made up of combining small images into one larger image at defined X and Y coordinates.

To display a single image from the combined image, you could use the CSS background-position property, defining the exact position of the image to be displayed.

CSS Image sprites- Advantage

A web page with many images, particularly many small images, such as icons, buttons, etc. can take a long time to load and generates multiple server requests.

Using the image sprites instead of separate images will significantly reduce the number of HTTP requests a browser makes to the server, which can be very effective for improving the loading time of web pages and overall site performance.

#home {
  width: 50px;
  height: 45px;
  background: url(media/flower.jpeg) 0 0;
}

CSS Image sprites-Hover effect

Now we will apply hover effect in image sprites. The :hover selector can be used on all elements, not only on links.

#home a:hover {
  background: url('media/flower.jpeg') 0 -45px;
}

#prev a:hover {
  background: url('media/turn_on.jpeg') -47px -45px;
}