Friday, September 28th, 2007p>Stuart Collville and Ed Eliot just launched a new CSS Sprite Generator tool, which is the first of many in a series of web-site performance tools.
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.