Monday, February 25th, 2008

CSS Sprite Generator: Open Sourced and Adapted

Category: CSS, Performance

Ryan Breen has been tinkering with the CSS Sprite Generator that Ed Eliot and Stuart Colville recently open sourced.

How did he tweak it?

One of the first articles I wrote about CSS sprites covered the built-in support in GWT, and I focused on their clever trick of including an MD5 checksum of the sprite map contents into the filename. This allows you to set effectively infinite cache headers since the name will change if the underlying image is modified.

Since the CSS sprite generator is now open source, I decided to add the checksum approach as an optional feature (on by default). You can try it here, or grab the tar or patch.

Ryan Breen Sprite Generator

Posted by Dion Almaer at 8:22 am

4.1 rating from 14 votes


Comments feed TrackBack URI

let me have a try

Comment by blankyao — February 25, 2008

Nice tool, the md5 checksums option is really useful!

If you’re looking for a CSS sprite generator running as a desktop app (also Open Source / BSD), you may want to check this:

Due to a different approach to the problem, the tool supports some additional CSS sprites scenarios (like spriting repeated backgrounds). It also automatically rewrites your CSS files, which might be sometimes more convenient. No online version yet though…

Comment by stanislawosinski — February 25, 2008

If you’re interested in a post-build/deployment tool for web applications you should checkout the Sonic project on codeplex (

It’s just starting up, but it’s ultimate aim is to control CSS, JS, PNG compression (possibly spriting as well), as well as renaming files to control caching and updating all file references to the new filenames.

Comment by AdamB — February 25, 2008

Great stuff,

I was wondering if someone could explain how the MD5 checksum is beneficial? Is it the same thing as renaming the file to another random filename?

Regards Rob

Comment by Robsworld — December 1, 2008

Leave a comment

You must be logged in to post a comment.