CSS: Combine multiple images into a Sprite to load pages faster

In most web pages we do have images which affects the time required to load the page.
Let us take an example, if we have 5 images with each having a size 50KB the web page will load five images(250KB)  and for these five images the server would need five httpRequest which is a time consuming process. To make it faster we can take the help of CSS. With the help of CSS we can save the cache memory and band width also. But some times the size may be same but definitely we can save the band width.

Or we can combine the images to form an image sprite which can greatly reduce the time required to load the page. We would require Photoshop, GIMP or a similar image manipulation application to combine these images into an image sprite. These images within a sprite can be positioned in CSS.

Step 2:-
Position the images according to your requirement, in CSS:

  
      #navlist{position:relative;}
      #navlist li{margin:0;padding:0;position:absolute;top:0;}
      #navlist li, #navlist a{height:44px;display:block;}
     
      #image1{left:0px;width:46px;}
      #image1{background:url('img.gif') 0 0;}
     
      
      #image2{left:63px;width:43px;}
      #image2{background:url('img.gif') -47px 0;}
     

      #image3{left:129px;width:43px;}
      #image3{background:url('img.gif') -91px 0;}
    
     
  

 
See the images given below

Example-2:

It will take more time having same functionality and look and feel

Now compare the sizes and the response time of both the examples you can understand  how much time we can save the  in each webpage and how much time we can save in a page having a lot of images.

It needs some effort from the devepolper to merge the image but some online websites make it simple. You can search for  it like: “image sprite”,”css image sprite” or “SpriteMe”.

For better understanding  you should have firebug with “YSlow”  plugin installed in your firefox web browser.

Note :-    It is advisable to merge the image after complete of your development because after your developement you have all required  images and you can also merge all the images into a square so that it take less space i.e memory.