Web Developers London Blog - CSS Sprites

CSS Sprites

By Richard Aspden

Added Thursday 01/05/2008

CSS Sprites are making an increasing impact on the development of websites. Many of the web’s big names, such as Yahoo now use sprites to streamline their load times and minimise their HTTP requests.

The major advantage of using css image sprites is to reduce the number of HTTP requests when a webpage loads – and in theory decrease the loading time of each page. For images that appear on each page (typically, header images, menu items, etc) sprites are a useful and efficient way for the browser to handle them in one go.

Sprites make use the CSS background position attribute. Rather than have a different background image for each page element, with sprites you have one (or few) large images and simply reference the x and y co-ordinates for each style.

It's not for everything however. There are limitations to the usefulness of sprites. For Instance they cannot be used with repeating background. Also, they don’t work as pngs in IE6 – or rather the pngfix workaround doesn’t work with sprites because you cannot specify x and y co-ordinates for the AlphaImageLoader filter. So it’s really just for jpg, gif and non-transparent pngs.

But for single static image backgrounds in CSS, sprites can be an effective means to improve the pageload speed, while at the same time putting all your images in one file can make things easier to manage. Sprites are also of value in sites which require the same image to be loaded as a background in various parts of the page – typically a logo or a horizontal rule.

To further help you along there are guides for creating sprites such as this one for use with Photoshop: http://www.askapache.com/css/speedy-sites-with-image-sprites-and-css.html. Ed Eliot & Stuart Colville have developed this site where you can upload a zip file of your images and it will create a sprite graphic for you: http://spritegen.website-performance.org/.

And of course here at TCL we have implemented CSS sprites for our own website. Most of the gif files on this page are from our standard.gif sprite file, and this approach is something we shall be implementing in future development projects.