Saving Bandwidth and Improving Site Speed Using CSS Sprites

As a site owner, possibly the worst experience that you could serve upon your visitors is a frustrating wait whilst the clock spins and the page loads. In most cases, potential customers would have pressed the back button in their browser and headed off somewhere else; this inevitably means a loss of potential business.

Site speed has become one of Google’s top ranking factors. If you wish your site to be user-friendly and well-positioned within the ranks of the major search engines, then you should be looking at ways to improve your web page performance.

Apart from the myriad of options displayed in Google Webmaster Tools, including consolidating and compression of external files, and checking for broken links on your website, I would recommend looking at the way you use images. One of the best web design techniques out there is the use of CSS sprites.

What are CSS Sprites?

It may be a common misconception that a sprite implies a series of small images.  On the contrary, a CSS sprite is one large image.

You may be aware of the CSS technique of displaying an “on/off” state for a button which is contained within a single image and positioned using the background-position CSS attribute on :hover (see the tutorial on a button that uses CSS sprites). CSS sprites are basically the same concept: The image is displayed on the page using the coordinates specified in your CSS, and only this area will be visible. It is easy to believe that a number of small images are likely to be less heavy in total file size than one containing all of the images positioned together.

But even if you may have images that are only a few bytes in size, each one is giving your web server unnecessary work to do by sending an HTTP request. Each request contains a portion of overhead information that uses valuable site bandwidth. Using CSS sprites can reduce the number HTTP requests and can make the web page seem more responsive because all interface elements are already downloaded before the user handles them.

This technique can be very effective for improving site performance, particularly in situations where many small images, such as menu icons, are used.

Building a Basic CSS Image Background Sprite

Let’s discuss this topic using an example. Using Photoshop, I created a document with a series of images (logos of companies) and divided the area into chunks of 100 pixels (see the images below).

I saved the file and named it logos.jpg. I used 100-pixel measurements between logos for the purposes of illustrating the concept in this article and because this was a convenient distance to move the position of the CSS background image each time when manipulating the coordinates in my CSS (you should be more accurate when actually applying CSS sprites to reduce its file size further). The CSS background image is focused on displaying only the first logo as defined by the green border — the coordinates of which are y = 0 and x = 0. To position them, we use the background-position attribute. To display the second image alongside the first, all that is necessary is to adjust the coordinates on the x-axis. Because of the way we have constructed the image (at 100-pixel intervals), all we need do is add a line of CSS advancing the x-axis by 100 pixels to display each logo.

CSS for the CSS Background Sprite

#logos {height: 64px; margin: 0; padding: 0; position: relative;} #logos li {background: url(/logos.jpg) no-repeat top left; margin: 0; padding: 0; list-style: none; position: absolute; top: 0;} #logos a {height: 64px; display: block;} // First logo #logos li a.jaz {background-position: 0 0} // Second logo #logos li a.iberotel {background-position: 0 -100px;} // Third logo #logos li a.solymar {background-position: 0 -200px;} // Fourth logo #logos li a.travcotels {background-position: 0 -300px;} // Fifth logo #logos li a.intercity {background-position: 0 -400px;}

The Results of Using CSS Sprites

In the example above, it was possible to reduce the file size from 52kb to 22kb and the number of HTTP requests from 5 to 1. This represents a good saving, and is only one small section of a web page! Our new CSS sprite method tests well in most modern browsers.

Further Reading on CSS Sprites

Here is a list of suggested reading resources about CSS sprites.

• CSS Sprites: Image Slicing’s Kiss of Death
• CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
• The Mystery Of CSS Sprites: Techniques, Tools And Tutorials – Smashing Magazine

References

1. Usage share of web browsers (May 2010)

Related Content

• 10 Ways to Improve Your Web Page Performance
• Five Ways to Speed Up Page Response Times
• 30 Exceptional CSS Navigation Techniques