" Live as if you were to die tomorrow. Learn as if you were to live forever.. "
- Mahatma Gandhi
" Live as if you were to die tomorrow. Learn as if you were to live forever.. "
- Mahatma Gandhi
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:
<style type="text/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;}
</style>
<body>
<ul id="navlist">
<li id="image1"><a href="google.aspx"></a></li>
<li id="image2"><a href="yahoo.aspx"></a></li>
<li id="image3"><a href="default.aspx"></a></li>
</ul>
</body>
See the images given below
Example-2:
It will take more time having same functionality and look and feel
<div id="navlist"> <a href="google.aspx"><img id="img1" src="img1.GIF"></img></a> <a href="yahoo.aspx"><img id="img2" src="img2.GIF"></img></a> <a href="default.aspx"><img id="img3" src="img3.GIF"></img></a> </div>
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.