Image Sprite in CSS

What is Sprite image?

Sprite image is a set of decorative images such as icons or buttons located in a single image file, then use the background properties of CSS to display the right position.

Websites with multiple images often take a long time to load and create multiple server requests, so using sprite images will reduce the load required to the server, reduce the file size, and increase the download speed. page and save system resources.

This is usually applied with hover, active or focus effects to create animated buttons more smoothly or to hold decorative icons.

Example Simple Sprite image

Instead of using three separate images, we use this single image ('img_navsprites.gif'):

Image Sprite in CSS Picture 1

Here are 3 processed icons placed in a single image. The important thing when using sprites is that you have to know the exact location and size of these 3 icons. Write the following code to display them separately:

Inside:

 width: 46px; height: 44px 

>> Determine the part of the image you want to use. Notice the width and height size because this is the display part of the icon, so it must be calculated correctly. It should be set to fit the icon size.

 background: url(img_navsprites.gif) 0 0 

>> Determine the sprite image and its position (left 0px, top 0px).

>> Use to specify a small transparent image does not affect the result because the src attribute cannot be empty.

This is the easiest way to use sprite images. Follow the following examples to insert links and hover images.

Create navigation lists with sprite images

Attach links to icons to navigate to another link. You try the following:

Determine the size of the image elements as follows:

 #home {left:0px;width:46px;} 

Use the entire left part and the image width is 46px.

 #home {background:url(img_navsprites.gif) 0 0;} 

Using the top left part of the image file should be located: left: 0px, top: 0px.

 #prev {left:63px;width:43px;} 

63px position from left to right (#home width is 46px + the distance you want between 2 icons), image width is 43px.

 #prev {background:url('img_navsprites.gif') -47px 0;} 

icon 47px to the left (equal to the width of #home 46px + 1px of the divider), so we have to move this image element to the left -47px to return to the correct position 0 0.

 #next {left:129px;width:43px;} 

>> For 129px position from left to right (starting point of #prev is 63px + #prev's width is 43px + the distance you want between 2 icons), image width is 43px.

 #next {background:url('img_navsprites.gif') -91px 0;} 

icon is 91px to the left (equal to #home width 46 px + 1px separator + width #prev is 43px + 1px separator).

Effects when hovering on sprite images

Add a hover effect to the navigation menu you just created above to make the components more vivid.

First, create a new sprite image ('img_navsprites_hover.gif') containing three navigation images and three images to use for the hover effect:

Image Sprite in CSS Picture 3

The advantage of using this sprite is that this is a single image and not six separate files, there will be no delay to wait for the request to the server when the user hovers over the image. Add three lines of code to add the hover effect:

 #home a:hover { 
  background: url('img_navsprites_hover.gif') 0 -45px; 
 } 
 
 #prev a:hover { 
  background: url('img_navsprites_hover.gif') -47px -45px; 
 } 
 
 #next a:hover { 
  background: url('img_navsprites_hover.gif') -91px -45px; 
 } 

Image Sprite in CSS Picture 4

Samuel Daniel

Update 25 May 2019