CSS Image Sprites

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, we could use the CSS background-position property, then defining the images position according to requirement.

Advantage of Using CSS Image Sprite

Combining multiple images is always a best approach to follow within web applications. Below are some advantages of using image sprites:-

  • When we have many images involved in a site, it will take a long time to load and generates multiple server requests.
  • Using sprites will 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.
  • Since all images are combined in a single image the hover image is displayed immediately on mouse hover that results in smooth hover effect.

Making the Image Sprite

We can make our own sprite using any image editing tool and for the sake of simplicity, we use different images of same size and then combine into one big sprite image.

Input:-

Index.html
	
<body> 
	  <span class="sprite chrome"></span>
</body>

Style.css
.sprite{
   background: url('sprite.png’);
   width: 50px;
   height: 50px;
   display: inline-block;
}
.chrome{
   background-position: 0 -100px;
} 

Output:-

Generally, these image sprites are used in making game as it make the game light weight. Below illustration represent the same.