So I was looking at the facebook HTML with firebug, and I chanced upon this image
and came to the conclusion that facebook uses this large image (with tricky image positioning code) rather than many small ones for its graphical elements. Is this more efficient than storing many small images?

This is an old method back from many years ago, when computer games developers had created image sprites. for a major website like Facebook it really saves a lot for performance issues. also, all the graphics are showed at once, and not one after another (load sequence)
–
vsyncAug 26 '09 at 19:39

The theory behind that is explained here: http://css-tricks.com/css-sprites/, also have a look here, as it underlines why do you really need one big image.
I also say that all the article is interesting :)

The problem with the pro-performance viewpoint is that it always seems to present the "Why" (performance), often without the "How", and never "Why Not".

CSS Sprites do have a positive impact on performance, for reasons that other posters here have gone into in detail. However, they do have a downside: maintainability; removing, changing, and particularly resizing images becomes more difficult - mostly because of the alterations that need to be made to the background-position-riddled stylesheet along with every change to the size of a sprite, or to the shape of the map.

I think it's a minority view, but I firmly believe that maintainability concerns should outweigh performance concerns in the vast majority of cases. If the performance is necessary, then go ahead, but be aware of the cost.

That said, the performance impact is massive - particularly when you're using rollovers and want to avoid that effect you get when you mouseover an image then the browser goes away to request the rollover. It's appropriate to refactor your images into a sprite map once your requirements have settled down - particularly if your site is going to be under heavy traffic (and certainly the big examples people have been pulling out - facebook, amazon, yahoo - all fit that profile).

There are a few cases where you can use them with basically no cost. Any time you're slicing an image, using a single image and background-position tags is probably cheaper. Any time you've got a standard set of icons - especially if they're of uniform size and unlikely to change. Plus, of course, any time when the performance really matters, and you've got the budget to cover the maintenance.

If at all possible, use a tool and document your use of it so that whoever has to maintain your sprites knows about it. http://csssprites.org/ is the only tool I've looked into in any detail, but http://spriteme.org/ looks seriously awesome.

Why would you manually create a sprite map? Anyways, let's say you did. Rather than rearranging everything, add your new stuff at the edge of the picture so no measurements are impacted.
–
NerdlingAug 28 '09 at 19:08

1

@Nerdling: Because just about every article people have linked to here tells you to? Anyway, it's less the sprite map, and more the background-position tags that are a pain to maintain. Sure, add new stuff at the edge, but what happens when the client wants a button that ended up in the middle of the map to be bigger?
–
Iain GallowaySep 3 '09 at 8:21

1

What's so hard to maintain about them? Are you updating them manually? Automate it! You should be able to write a build script which will take a set of images, merge them into a sprite map, and then spit out the relevant CSS to use them.
–
YuliyMay 22 '10 at 7:26

1

Absoloutely, hence me linking the tools. I just don't want people to read the linked articles and get the wrong idea.
–
Iain GallowayMay 24 '10 at 11:34

Simple answer, you only have to 'fetch' one image file and it is 'cut' for different views, if you used multiple images that would be multiple files you would need to download, which simply would equate into additional time to download everything.

Cutting up the large image into 'sprites' makes one HTTP request and provides a no flicker approach as well to 'onmouseover' elements (if you reuse the same large image for a mouse over effect).