Muffinresearch Labs by Stuart Colville

CSS Sprite Generator Tool | 13 Comments

Posted in Code on 27th September 2007, 10:50 pm by

Website Performance - CSS Sprite GeneratorEd 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.

Post Tools

  • http://lloydi.com/blog/ Ian Lloyd

    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 :)

  • http://muffinresearch.co.uk Stuart Colville

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

  • Pingback: Javascript News » Blog Archive » CSS Sprite Generator Released

  • http://www.e-myth.com Nate

    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.

  • http://fberriman.com Frances Berriman

    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.

  • http://muffinresearch.co.uk Stuart Colville

    @frances: Thanks for your feedback, we are looking into providing a fix for this issue shortly.

  • http://www.samplify.be Sammy

    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.

  • Pingback: Morethanseven » PHP Asset Packager

  • johanhendrix

    can anybody point me to a example?
    i don’t understand how to implement it..

  • Mostafa

    @johanhendrix

    you can see ask.com as an example

    Regards

  • tom stall

    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

  • http://muffinresearch.co.uk Stuart Colville

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

  • samir

    Hi Stuart

    I have tried your tool to sprite images and css but it didn’t work well. I have 1100+ images and 64 css files to look after them. so may be the tool is not supporting this huge amount of images and css files.

GNU screen: open tab in current working directory|(1)

A nice trick for having screen open a new tab in the same directory as the one you’re currently in. To use it add it to your .screenrc

# Open new window in current dir.
bind c stuff "screen -X chdir \$PWD;screen^M"
bind ^c stuff "screen -X chdir \$PWD;screen^M"

Hat tip: mteckert on SuperUser.com

Ubuntu: add-apt-repository: command not found|(3)

When you’re using a minimal Ubuntu install if you find the ‘add-apt-repository’ command is missing (it’s useful for adding PPAs and other repositories), then simply run:

sudo apt-get install python-software-properties

Photos on Flickr

© Copyright 2004-12 Stuart Colville, all rights reserved. May contain traces of Muffin. Powered by WordPress. Hosting by Slicehost.com This page was baked in 0.551s.