Improve the Speed of Your Site by Using CSS Sprites

Reducing the number of HTTP requests and the bandwidth used is and will continue to be a challenge as designers build ever more elaborate designs. One area where you can both reduce the number of requests and bandwidth is by combining styling images that creep into the design such as corner images, line images, gradients, backgrounds, and so forth. First, start with the basic uses for styling images, as shown in Figure 1.

Figure 1 Box with rounded corners

This simple box is a common use of styling images; however, it is expensive in terms of the number of requests. This example uses eight individual images (one for each corner and each line). Each of these eight images are show in Figure 2.

Figure 2: Eight images used to create the box

The yellow background is added to make it easier to searpate images. These images can be combined into a couple CSS sprite images; however, before you get there,you need to start with the CSS and see how it changes to use CSS sprites. Following is an exerpt from the CSS used to create the box in Figure 1.

.Top
{
   background-image: url(TopLine.png);
   height:10px;
   width:100%;
   background-repeat:repeat-x;
   background-position:top center;
}

.TopLeft
{
   float:left;
   background-image: url(ULCorner.png);
   width:10px;
   height:10px;
   background-position:top left;
}

The first CSS class, Top, is used to draw the line on the top of the box. You should notice that it uses a height parameter and a repeat of repeat-x, causing it to properly space the line for the corners and repeat it across the width of the box. The class TopLeft is used for the upper left corner of the box, and uses a fixed height and width. Although there are other statements in the classes, they are not critical in determing how to combine images. Essentially, you need to separate the images into three categories as identified below.

1. Fixed height and fixed width
2. repeat-x (horizontal lines)
3. repeat-y (vertical lines)

Now that the images have been separated into categories, you can start to combine the individual images into three by using your favorite paint program. The combined images should look similar to the three shown in Figure 3.

Figure 3: Combined images

Now that that the three images are combined, you can start to modify the CSS to use these images. To put these images to use, you use a slightly modified background statement in the CSS as follows:

background: url(image_file.png) -x -y;

The -x and -y parameters are added to the statement to identify the upper-left corner to start the background. Listed below are the four cordinates needed for the corners.

• Upper Left: -0 -0
• Upper Right: -10 -0
• Lower Left: -0 -10
• Lower Right: -10 -10

Obviously, one major key to sprite images is determing the proper offsets to use. With this information, you now can modify the original CSS to use these images. Listed below are the replacement classes for the top line and the upper left corner as shown above.

.Top
{
   background: url(hlines.png) -0px -0px repeat-x;
   height:10px;
   width:100%;
}

.TopLeft
{
   float:left;
   background: url(Corners.png) -0px -0px;
   width:10px;
   height:10px;
}

The next step is to go through the other CSS classes and replace the background statements with the alternate format with the proper offsets for the sprite images.

Download the Code

You can download the code that accompanies this article here.

Conclusion

Now that you have a sample site using CSS sprites, you can see what kind of improvements you’ve made from a performance perspective. Following is a simple chart listing the before and after results.

Another benefit of using CSS sprites is that you allow the browser to reuse resources and reder your site much faster. This simple rounded box example is just a starting point. Be creative with your CSS sprites and combine as many images as possible based upon the category identified above. Figure 4 is an example of what can be done with a CSS sprite image that combined a total of 13 small images into a single 3.07k image. Included inside are the corners needed for backgrounds and boxes, menus, and other various separators.

Figure 4: Sample complex CSS Sprite image

About the Author

Chris Bennett is a manager with Crowe Horwath LLP in the Indianapolis office. He can be reached at chris.bennett@crowehorwath.com