CSS Sprite Generator Tool | Comments (12)
Posted in Code on 27th September 2007, 10:50 pm by Stuart
Ed 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.
Stuart, Ed,
This is an excellent idea and one that I will use for sure. Admittedly it will be one that I use infrequently and for a brief moment in time – but I’m sure that’s the same for all users: get in, do the job, take the swag!
I know that you have provided help for the options on the site, but I’d be inclined to have it more inline. For example, talking about vertical and horizontal offset, it’d benefit from a mini graphic of some kind – perhaps appears when you hover over/focus on a thumbnail – to demonstrate visually what you mean. I was confused by the transparency part too (specifically the checkbox for ‘Use Background Colour for Transparency’ – wasn’t sure how that related to the field above).
Now I’m just looking forward to the next time that I have to create something using this technique
@Ian: Thanks for your comments. You’ve made some great points about the interface, and we are certainly thinking that some of the options do need better explanation and in some cases some options can be hidden away as advanced options.
No doubt we will look to make some updates based on your suggestions in the near future.
[...] 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. [...]
This will save me a bunch of time as I try to make our site faster and more inline with yahoo’s performance model. Thanks.
Hey. Just thought I’d drop by and say we’ve been playing with it a bit at work.
Only problem we’re having is when we’re combining a bunch of gifs, we’re having to get it back as a PNG and then re-save it out as a gif because the quality coming back wasn’t high enough as gif output.
So, it’s helpful to get it back as an image with the CSS positioning worked out for us, but we needed a little more quality control about compression of images.
@frances: Thanks for your feedback, we are looking into providing a fix for this issue shortly.
That’s a nice litte tool. One thing that I find missing is an actual example of the thing, especially on the page “What are CSS sprites”. You explain it with words, and give a link to A list Apart, but this page just begs for an actual visual example of the technique (eg. an actual rollover link, the html, the css). I was aware of this technique before coming to the site, but it might be useful for people who are not.
Thanks.
[...] YAHOO!s performance rules. The recent release of the YSlow extension and another upcoming book from Stuart Colville and Ed Eliot cap things off [...]
can anybody point me to a example?
i don’t understand how to implement it..
@johanhendrix
you can see ask.com as an example
Regards
Hi there,
Just a quick question about the naming of the images and the order of processing on the server what happens when you add new images to the sprite the next time will all the background positioning change?
v1.0
abc.gif
xyz.gif
v1.1
abc.gif
efg.gif <— NEW IMAGE
xyz.gif
What happens to the positioning of xyz.gif will this change therefore if you have built your site already you will have to go and change everything again?
Thanks for your time and effort
@tom: There’s no guarantee the ordering will be the same in the image however as long as you copy both the image and the CSS that is generated you won’t have an issue.