CSS Sprite Generator Tool

Website Performance - CSS Sprite GeneratorEd and I have been busy putting the final touches on our CSS Sprite creation tool which is now available over at http://spritegen.website-performance.org

For the uninitiated, a CSS Sprite is a single image file which contains several graphics. Using CSS background positions it's possible to display any one of the graphics. By using a sprite you save on multiple http requests which helps speed up the rendering of your page.

The tool allows you to upload a zip of images which the script then concatenates into one image to be used as a CSS Sprite. The CSS offsets for each image are created and output and class-names for each image in the sprite can be generated from the filenames of each of the original images. In fact this approach is recommended.

A feature I'm really pleased with is the ability to screen out duplicate images, and either ignore them or have the classes merged to point to the same graphic. This is achieved through comparison of MD5 hashes of all of the uploaded files.

This is the first tool that we've launched through http://website-performance.org and we will be providing many more interesting tools related to web-site performance in due course. Both Ed and I are currently writing a book for Apress that will be being published in early 2008, and this site will serve as a place for all of the related materials so there's lots more exciting stuff to come in the near future.

For now get over to http://spritegen.website-performance.org; have at it, and let us know what you think.

Show Comments