Tools to make CSS sprites?

Viewed 60795

Are there any good tools to make css sprites?

IDEALLY I'd want to give it a directory of images and an existing .css file that refers to those images and have it create a big image optimized with all the little images AND change my .css file to refer to those images.

At the least I'd want it to take a directory of images and generate a big sprite and the .css necessary to use each as a background.

Are there any good photoshop plugins or fully blown apps to do this?

21 Answers

This will do 90% of the work for you: CSS Sprite Generator. You'll still need to edit the rules yourself, but the tool will give you the code fragments you need for the new CSS file.

This looks promising :

http://csssprites.org/

Also i found this article which has some useful information, and even some reader comments worth reading.

Also apparently google web toolkit has something - so if you're using that it might be worth checking out.

Not a direct answer but to my fellow developers and web integrators, consider simply aligning each sprite to powers of two; eg a 16 pixel or 32 pixel grid. It makes calculating offsets in the CSS file much easier. All the white space between does not matter as the gifd and png formats compress that very well.

If you like Java, then you can use GWT 1.5+ which comes with something called "ImageBundle." The GWT compiler will handle all the nasty details for you. You won't even have to code a single line of JavaScript or write any CSS.

Here is a script that combines images via a Photoshop script into CSS sprites. It won't do a sprite map as you asked, but it will combine images in multiples of two (2, 4, 8) if they are the same size. I prefer combining similar images (normal, hover, selected, parent of selected) than having all the images in one file.

Related