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! Smush.it™, this quickly shows you if any savings can be made on file size.
- Zip the optimised image up and upload them to somewhere like www.spritegen.website-performance.org. 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.