27 - CSS Image Sprites

Much often we might have seen a web page taking more time to load and it also loads in bits and pieces, half of the page in the rightmost corner is loaded and a part of image at the other corner. This usually happens because the web browser contacts the server on which these images are hosted to display them on the web page.

This is called HTTP request, so the server is contacted through a request every time an image has to be displayed.

This mechanism may not affect a small web site with 4 or 5 images, but it becomes a performance overhead in case of large web sites and the web page takes forever to load.

This problem can be solved by using Image Sprites. This is not a rocket science. It is just simple.

  • Combine all the icons or images you want to use on your website into a large image and display a part of it at relevant places. “Fetch once, use many times”. This mechanism decreases the page load delay significantly.
  • You can combine any number of images to form an image Sprite. Create a new big image using any of the free online tools available and note down the height and width of the output sprite.

 Let’s see an example. We will use the following image sprite, “css_sprite.png”on our web page

       

Height of each image is 100 and width is 100. The output sprite has 100x300 dimensions.

Let’s start coding:

<html>
   <head>
      <style>
         body{
         background-color:gray;
         }
         .fb{
         width:100px;
         height:100px;
         background:url("css_sprite.png") 0 0;
         float:right;
         vertical-align:text-bottom;
         position:fixed;
         bottom:0px;
         right:0px;
         }
         .follow{
         width:100px;
         height:100px;
         background:url("css_sprite.png") 0 -100;
         float:right;
         position:fixed;
         bottom:0px;
         right:100px;
         }
         .twitter{
         width:100px;
         height:100px;
         background:url("css_sprite.png") 0 -200;
         position:fixed;
         bottom:0px;
         right:200px;
         float:right;
         }
      </style>
   </head>
   <body>
      <div class="fb"></div>
      <div class="twitter"></div>
      <div class="follow"></div>
   </body>
</html>

The output of the above program would be:

    

As seen from the above output, we displayed different parts of our image sprite on a web page.

  • The background:url("css_sprite.png") 0 0;  specifies the browser to start at position 0,0
  • The background:url("css_sprite.png") 0 -100; specifies to the browser to go down 100 pixels and display.
  • The background:url("css_sprite.png") 0 -200; specifies to the browser to  go down 200 pixels and display.
  • We also took help from position attribute to position our images on the right-bottom side of the web page.
  • Three divs are declared in the body section to display the images.

Now you know the answers to the basic questions like what, why, how of CSS Image sprites. In fact there is lot to learn about them, you will know more by exploring more.

Like us on Facebook

Wideskills