Friday, September 28th, 2007
CSS Sprite Generator Released
Category: CSS
, Performance, Utility
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.
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
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.
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
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. :-)
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. ;-)
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. ;-)
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%).
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 :)
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].
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.
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?
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.
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)
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