Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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.

share|improve this question
add comment

4 Answers

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

What I recommend is:

  • Make sprites for images that appear on most pages.
  • Use a lazyload script to load other images when they are in focus.
share|improve this answer
    
Regular HTTP requests are also fairly light relative to the size of most image files. It's generally creating new connections that generates the most overhead per request. But if you enable persistent connections (which most browsers/clients do by default), it too shouldn't be a problem. –  Lèse majesté Nov 6 '10 at 21:56
    
@Lese is exactly right. –  Frank Nov 7 '10 at 2:47
add comment

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

share|improve this answer
    
the link searches for the terms "online sprite generator" - I'm pointing this out since it isn't humanly visible on this page. –  Michael Paulukonis Nov 5 '10 at 15:15
add comment

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

share|improve this answer
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.