In the last year or so there has been a big shift towards making websites load more quickly.  There are many ways which you can help improve page speed.  One (of many) is combining images in CSS sprites, thus reducing the amount of calls that the page needs to make.  The way I used to do it would be to go through all the visuals picking out the images that I wanted to use as background images, then I would have to write all the CSS, adding the widths, heights and background positions.  This usually took some time and was sometimes difficult to maintain.

A faster method

  • Go through the visuals as you normally would but produce the backgrounds as individual images (as opposed to a combined sprite)

  • Name the images sensibly, i.e. be descriptive so you can work out what the image is from the name.  The image name will be used for your CSS class.

  • For additional optimisation these images can be put through a service like Yahoo!™, this quickly shows you if any savings can be made on file size.

  • Zip the optimised image up and upload them to somewhere like Then you will be provided the combined image and the all the CSS produced for you.

  • These styles can be then added to your stylesheet, I like to put it at the bottom so it’s separate and easily updatable.


Not only is this quick to do when templating sites but going forward it’s also quick and easy to maintain.  If a new page needs templating then follow the same steps, but group with your original individual images, overwrite your sprite and CSS.  As the site uses the image names for the CSS classes then you do not need to worry about any differences in class names.

If images are not used anymore then delete them from your original individual images and follow the same steps.  This will reduce the size of your sprite.


This method will not suit all needs, and if you really wanted to optimise your site then creating them manually will always beat the automated process, especially if designing for mobile.