Software to combine multiple images

Question

Combining multiple images into a single image is a good way to improve performance by reducing the number of http requests. But how do most webmasters manage their combined images?

Is there any software available that makes combining images into a single image easier? It would be nice to throw the software a set of images and have it combine them and then report on the X,Y,width,height offsets within the image.

Answer 1

http://spritegen.website-performance.org/ http://csssprites.com/ http://csssprites.org/

You dont want to load all your images from sprites. It can slow your site down if the page that is loaded doesnt actually use the images. There is a clear balance of what needs to be on sprites and what doesnt.

What i recommend is: Sprite images that appear on most pages. Then, use a lazyload script to load images when they are in focus.

Answer 2

FYI, they're called sprites and there's quite a few free ones available online.

Answer 3

Well, I use a GIMP script for taking care of that.

Answer 4

ImageMagick is a great image processing tool that can do this. It's command line only so isn't the easiest to use for non-programmers. For stitching images together, use the montage command:

montage -geometry +4+4 *.png

This won't generate the CSS for you, but unless you have more than 30 images that shouldn't be a problem.

There are many online tools that can do the CSS too, with class names based on the filenames. This one is very good.