CSS Sprites : Reducing HTTP Requests
Now a days with use of divs and extensive CSS capabilities people use lot of CSS background images. Few days back when I was reviewing one of the project for efficiency and speed of loading. I found it was having around 16 background images, which prompted this article.
These images are generally very small less than 1 KB. In most of the cases they are repeated. But one should understand it creates these many HTTP connections with the server. Browser does a limited HTTP connections to server at a given time. So all these HTTP connections are qued in a bunch and add to loading time.
What’s the solution?
Combining all these background images in one is the best solution. But then how to use particular part of the image for particular CSS class? That’s the beauty of CSS sprites. An example is best than many words. Just see below example to know its working amazingly….
How many images you think this example is having (move over the icons to see effect)? Eight. Nope, its having only one sprite image. Below is the actual image.
You can name this image whatever you want even if they are called as sprites no need to call it only as sprite.png.
Thus instead of 8 HTTP requests this will give only 1 HTTP request ( Wow!!! We saved almost 7 HTTP requests) and size of combined image is much less than 8 different images.
Below is code of shown example.
-
<style>div.main{float: left;border: 1px solid #d8d3b0;background-color: #f6f6e1;
-
-
padding: 2px 0 2px 0;
-
-
}
-
-
div.main a {
-
-
background: url(http://localhost/pravin/sprite_css.png) 0px 0px no-repeat;
-
-
display: block;
-
-
float: left;
-
-
width: 50px;
-
-
height: 50px;
-
-
padding: 0;
-
-
margin: 0 2px 0 2px;
-
-
}
-
-
div.main a.first {background-position: 0px 0px;}
-
-
div.main a.first:hover {background-position: 0px -51px;}
-
-
div.main a.second {background-position: -51px 0px;}
-
-
div.main a.second:hover {background-position: -51px -51px;}
-
-
div.main a.third {background-position: -103px 0px;}
-
-
div.main a.third:hover {background-position: -103px -51px;}
-
-
div.main a.fourth {background-position: -153px 0px;}
-
-
div.main a.fourth:hover {background-position: -153px -51px;}</style>
-
<div class="main"><a title="first" class="first" href="#"></a><a title="second" class="second" href="#"></a><a title="third" class="third" href="#"></a><a title="fourth" class="fourth" href="#"></a></div>
Who else are using sprite images?
Yahoo :-Â http://l.yimg.com/t/img/1226894530icons_sprite3.gif
AOL :- http://portal.aolcdn.com/p/skn/main_v1/global_sprite.png
Yahoo Shopping :- http://l.yimg.com/a/i/us/sh/topshop08/sprite_040208_8bit.png
You can use CSS sprites and optimize speed of your site loading. Let me know your experience through comments below.
Explore more through below articles :-
Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests
CSS Sprites: Image Slicing’s Kiss of Death
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
This is perfect post. The beginners in web should read such kind of lessons. TinyMce editor does this. All HTML & CSS Programmers should use this trick.
“You can also use CSS sprites and optimize speed of your site loading.” Can u tell us how it will work? coz browser have to download same size of chunk anyway. Reducing the http requests will make ur server faster but I doubt it will affect on rendering the Image coz thats depend on the internet speed.
- Vikrant
Vikrant - “You can also use CSS sprites and optimize speed of your site loading”. This link will answer your question - http://yuiblog.com/blog/2006/11/28/performance-research-part-1/
It says “The impact of having many components in the page is exacerbated by the fact that browsers download only two or four components in parallel per hostname, depending on the HTTP version of the response and the user’s browser. Our experience shows that reducing the number of HTTP requests has the biggest impact on reducing response time and is often the easiest performance improvement to make.”
So it increases speed of site loading by i)reducing http requests and ii)reducing image size (combined image size is always less than too many individual images. E.g. Above Yahoo sprite image is only 12KB but each different image would make it around 35KB)
Yes obviously it will depend on internet speed also. But on same internet speed, the page will render faster if one reduces the HTTP requests.
Perfect. I’ve learnt new stuff. U still da best (y)
Important point For The Other readers.
“the fact that browsers download only two or four components in parallel per hostname”
waooooooooooooooooooooooo…. superb. Recently we have completed one project http://www.albumhunt.com where we have used tableless structures. almost reduced page downloading time. but I still feel that there might be something more powerful needed to make it like thunder storm for my page. First I thought might be people (yahoo,google) might be using faster servers. but your blogs really hits the bulls eye. now on all my next project we will use this technique. I like the thinking of http request breakdown.
Ajax is also nice technique tough.