HighOnCoding.com: CSS Sprites Merging Images to Achieve Better Performance

CSS Sprites Merging Images to Achieve Better Performance

AzamSharp
Published Date: 4/29/2009 8:44:54 PM
Views: 4771

Abstract:
Images play an important role in any web application. Images attract visitors and make the website more attractive. Images should be used with caution since they eat bandwidth and if not used in a controlled manner can slow down the web application. In this article we will demonstrate how to use CSS sprites to improve performance and how to combine images into a single image using a C# console application.
What's the Problems Doc?

Good question! The problem with using multiple images is that each image will issue a new HTTP request to the server. These multiple requests adds up and contribute to the response time.

Take a look at the screenshot below which shows how multiple images are served separately.

The above image shows that each image ends up issueing a new HTTP request. Let's see how we can reduce the number of requests by using CSS sprites.

Using CSS Sprites:

CSS Sprites tackle this problem by having a single image which contains all the images used on the page. This means you only download a single image and use the x and y positions to render the part of the large image which contains the desired image you want to display. Take a look at the following image which is a combination of three images.

Now, if we have to display the Google logo we will use the same image but different background position. Similary, if we desire to display the CNN logo we will use the same image but different background position.

Hopefully, you got the idea behind CSS sprites now let's move on how to join the images into a single one.

Joining Images to Form CSS Sprites:

There are multiple ways of joining the images. The easiest being openning the paint application and copying the desired images into it. This approach is tiring and takes too much time if you are joining a lot of images. In this section we will take a look at a simple console application which joins the images together. Here is the class diagram of the application.

The console application takes a target folder path and destination image path. The application then reads all the images from the target folder and append the images in a vertical fashion. Please note that there are many different ways to append the images together into one and you can use anyone you like.

Here is the code that is used to combine the images:

Here is the image showing the application in action.

The application also generates a css file which you can add in your project. The css file contains the styles derived from the image name, width, height and position coordinates. Here is the generated CSS file for our images.

Using the CSS Sprite on the Page:

First, you must copy the CSS file to your application. Then copy the final image which in this case is "MyWebsiteCSSSprite.png" to your images folder. Now, you can simply assign the class name to the HTML DIV element and you will get the images on your page.

NOTE:

There are few exceptions when using this method for displaying images. If you have lots of images then it will not be feasible to generate a one large image with huge size. This will block the user for a large period of time until the image is downloaded. A good practice is to join the images together where the total size is not too large. It is hard to define large since each website has its own scale and measure. My measure is that your combined image should be less then 50K. This will allow the user to quickly download multiple 50K files instead of downloading single 2MB file.

Conclusion:

In this article we learned how to increase performance by using CSS Sprites and combining images into a single image. In the later articles we will explain how to create a GUI for our image combining application.

[Download Sample]

Comments/Feedbacks


	Subject: exceptional Name: ajit goel Date: 5/4/2009 8:34:51 PM Comment: exceptional article. simple, too the point.