AzamSharp

Combining Images CSS Sprites to Increase Performance
published on 4/21/2009 8:55:48 AM

I just finished reading High Performance Web Sites by Steve Sounders. The book is filled with useful information on how to boost the performance of web sites. One of the advice was to use CSS Sprites instead of downloading images individually. The idea behind CSS Sprites is to download one large image which contains all the other images. Once, the image has been downloaded you can refer to the contained images by top and left positions.

Here is a screenshot showing images downloaded individually.

As, you can see that for each image there is a separate request to the server. This continious back and forth communication with the server kills the performance of an application.

A much better way would be to combine all the images as one single image and then download that image instead of downloading multiple images. There are many ways of combining images together. Open up your favorite image editor and start pasting the images into it. This can get very tiring if you have 20-30 images to combine.

Here is a small application that combines the images together. Please note that this application might not use the best possible algorithm to combine the images. You should read about "Box Algorithem" which is more suitable for this purpose.

Here is the class diagram of the application.

And here is the result:

Currently, the application does not create a CSS file but I will include that in the later version.

Here is the part of the CSS style which shows CNN logo:

#myImage1 
{
    background-image:url('../Images/finalimage.jpg');
    background-position:0px 0px; 
    height:36px;
    width:148px;
}

Now, let's add all the images to the page.

 <div>
    
     <div id="myImage1"></div>
      <div id="myImage2"></div>
       <div id="myImage3"></div>
       
    </div>

And here is the final result:

Now, we only download a single image and use that image to create other images. This greatly reduces the client communication with server and hence increases performances.

Did you like this article?

Submit

Name:
Name:
Email:
Comment/Feedback:
2+2=