CSS Sprites is a technique by which we can combine multiple images in a single big image and position the various parts of this big image with our elements using pure CSS attributes. The primary objective behind using CSS Sprites is to decrease the number of HTTP requests and thus decreasing the request stress on server. The idea behind CSS Sprites is to consolidate multiple images into one sprite and then selectively display portions of this sprite with positioning. It starts by creating a larger CSS Sprite by grouping more than one images (usually icons) together and aligning them in proper grid style to aid the positioning. Then it is aligning used a proper positioning values on the webpages to show their respective images. This way it decreases the number of HTTP requests and thus increases the overall speed of webpages.
Sometimes back, we used the favourite slicing technique to break down a larger image into smaller slices (parts) so as to make pages load faster, but all this technique was only fooling our eyes as the page looked like loading faster, while in reality it was not. Each of those images was fed up as a separate request to the server and would increase the time of loading actually.
According to Yahoo UI blog, the resultant sprite created by joining smaller images is always smaller in size than the combined contributed parts. It is because we have to use a single color table for the sprite instead of individual color tables for the contributed ones. Another advantage of using sprites is that this way we save the overhead required by the images.
Enough Writing, Let’s make a try
With the basic concept and theory behind CSS Sprites, it is time to build actual CSS that makes it run. Here we will make a try to replicate Yahoo’s sidebar.
As can be seen from the picture Yahoo’s sidebar contains around 19 links with their corresponding icons, but if you will notice, it has a single source image from behind. Infact Yahoo uses two CSS Sprites on their home page to increase their performance. As stated by the ex-Chief Performance Guru of Yahoo, Steve Souders on Yahoo’s performance blog that the number of HTTP requests is directly related to the loading time of the page, so lesser the HTTP requests means the faster image loading.
Coming to the point, let me tell you that I used the same image from Yahoo to achieve our effect more precisely.
As usual, the code starts with a browser reset. So did a browser reset with the Eric Meyer’s Browser Reset to neutralize and bring uniformity in the elements across different web browsers.
To establish a Yahoo like block level look, let us create some div containers and do a bit of styling to them.
<div id="menu-holder">
<div id="menu-holder-inner">
</div>
</div><!--/#menu-holder-->
Then I did a bit of styling for the divs to make a Yahoo like look.
/*------------------------------------------
STYLING FOR DIV ELEMENTS
------------------------------------------*/
div {}
/* Holder for our menu */
#menu-holder {
width:148px;
border:#B0BDC6 1px solid;
margin:50px auto;
background:url(../picx/grd-4px_1.1.gif) repeat-x;
}
#menu-holder-inner {
border:#FFFFFF solid 1px;
border-top:0;
border-bottom:0;
}
The code above indicates some background and border attributes that were used to style our divs. Moving forward, let us now create the menu items to be used in our menu.
<ul id="left-menu">
<li style="background-position:-396px -115px;">
<a href="" title="" class="menu-items-a" >Answers</a>
</li>
<li style="background-position:-396px -436px;">
<a href="" title="" class="menu-items-a">Autos</a>
</li>
……
……
</ul>
/*------------------------------------------
STYLING FOR UL ELEMENTS
------------------------------------------*/
ul {}
#left-menu {
list-style:none;
margin:0;
}
li {}
#left-menu li {
padding:0 0 0 0px;
background:url(../picx/trough_1.6.gif) no-repeat;
line-height:1.7em;
}
/*------------------------------------------
STYLING FOR A ELEMENTS
------------------------------------------*/
a {}
.menu-items-a {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:0.7em;
color:#014289;
text-decoration:none;
font-weight:bold;
display:block;
padding:0 0 0 30px;
}
.menu-items-a:hover {
text-decoration:underline;
}
As you can notice from the above snippet, I have included a CSS attribute list-style:none; to override the default icon style for the ul. I have included the default background for all the li’s which they inherit from the default style #left-menu li .As you can see, I have written some inline CSS with each li just to change the position of the background image so as to display the desired icon only with the link. The inline CSS here is just to save time and you can replace it with the ids for the li’s or unique classes.
This menu example is just a simple example that demonstrates the power and simplicity of CSS sprites and just exposes a small functionality or application of the same. You can create more parts of your page using the technique.
4 Responses to CSS Sprite – Way for better web performance
-
Chandrashekar Says:November 26th, 2008
very good article thanks man
-
Chandan Jhoyti Says:November 26th, 2008
The article is superb. I was trying for a long to learn the technique. Good to know that it speeds up the overall performance of the page.
-
Pankaj Says:November 26th, 2008
I’m using this method since long period.
-
Pragya N Says:December 30th, 2008
Very good article. The best part is very simply explained.
Keep it up man.Pragya N
