Friday, September 28th, 2007

CSS Sprite Generator Released

Category: CSS, Performance, Utility

<p>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.

CSS Sprite Generator

Related Content:

16 Comments »

Comments feed TrackBack URI

This is very useful and has just saved me several hours of work. It does choke on .zip files containing 1,000 images though(just shows a white page) – so maybe they can up the limit a bit and then it’s perfect

Comment by Alex — September 28, 2007

Thats a nifty utility, I’ve got some projects that have gone icon happy, and I’ll be curious to see how this might improve performance.

Comment by Jon Hartmann — September 28, 2007

So I see that the generated positioning in the CSS includes fractions of a pixel for a few of the “sprites”. I wonder if that is an error when trying to split up the combined generated image

Comment by Danilo Celic — September 28, 2007

This is awesome, very nicely implemented.

I wish they had the source code open, it would be a huge addition to be able to add this process to a build script and have the file generated automatically, it means added new icons would require someone to manually go through the process again.

I understand why the source isn’t open, but it would be cool if it was. :-)

Comment by JP — September 28, 2007

This is a nice idea for a tool, but I’m a bit curious why the offsets in the screenshot have decimal offsets. I’m a big fan of control though, so I think I’ll just keep managing my sprite maps myself. ;-)

Comment by Andy Kant — September 28, 2007

Thanks to everyone for the feedback on the tool. There shouldn’t be pixel offsets in the output CSS. I’m guessing that’s an edge cache we didn’t hit. I’ll get on it and see if I can fix quickly. If someone can send me an example of some source images which cause the problem it’ll make things a touch easier.

With regards to source code release and command line versions – stay tuned. ;-)

Comment by Ed Eliot — September 28, 2007

Just an update to let you know that I’ve fixed the issue with decimal places appearing in the CSS. It only happened when resizing source images (setting values other than 100%).

Comment by Ed Eliot — September 28, 2007

You may try this windows app that build the sprite and the CSS rules automatically, client side. Delphi Source is published as well.
I’ll be happy to get any feedback :)

Comment by Nicolas — September 29, 2007

Neat tool, nice to see someone finally made this concept for the masses.

Only thing is this method can’t always be done in some circumstances [when optimizing code].

Comment by Shawn K — October 2, 2007

Last time I made some css sprites I found out that unless you break up your css rules like the example below:

background-image: url(images/winBorders3.png);
background-position: right top;
background-repeat: no-repeat;

instead of

background: url(images/winBorders3.png) right top no-repeat;

then the sprite image will be loaded multiple times, once for each background: rule. So you might want to include that.

Comment by countzero — October 3, 2007

I just used that tool to make a PNG. The file size came out bigger than the combined file size of the files I put in. What gives?

Does it matter?

Comment by vinhboy — October 5, 2007

Nice tool…
Sometime back I published a similar tool here http://blogs.msdn.com/shivap/archive/2007/06/23/automate-packing-multiple-images-into-one-and-css-generation.aspx with source code. One advantage with my tool is that it can be integrated with build script which we do at OfficeLive.

Comment by Shiva — October 16, 2007

I’ve just released a tool that does the same thing, but using totally different approach allowing greater flexibility and significantly reducing manual work. Try here:

http://smartsprites.osinski.name/

(No on-line version yet though, if there is demand, I’ll build one)

Comment by stanislawosinski — February 20, 2008

SS Sprite Generator Released is a free tool for WYSIWYG menu generation. Just add menu items, define color and font settings and get an instant preview inside the program window itself. You may then get the CSS and XHTML menu code and paste it in your webpage, or – if you prefer — you may just save new (template) page with the menu generated… Sv Creation is very happy for that

Comment by kaplisrinku — June 5, 2008

If anyone wants a little more control, I have a PhotoShop JSX script that combines two image to create a CSS Sprite with the hover image below the mouse off image. All you have to is open the two images and run the script. If anyone would like to download it, it works with CS3.

Comment by smjdesign — December 31, 2008

Hey, Some buddies and I put together an automatic css sprite generation tool called SpriteMiester (www.spritemeister.com). We were sick and tired of manually updating sprites whenever we created new work, but especially as we revised current interfaces. We decided to create a php library that would allow css sprites to be automatic using a simple configuration file. It outputs an optimized sprite and automatically updates your css with the offsets for each image. Check it out, feedback is welcome!

Comment by WebDesignMonkey — November 21, 2010

Leave a comment

You must be logged in to post a comment.