One single image

komodosp

On a web page, is it better, performance wise, to put all the non-dynamic images onto one single jpg, then mask each one inside a div to just display the part you want for each image. This way, there is only need for one request to the server... ? Is it held in the client's memory just once too? I know it would be a hassle to update... But it might be worth it for days of heavy traffic or pages with a good few images....

tricky D

It is a bit better. http://www.google.ie/search?q=css+sprite

Eg
http://www.whatclinic.com/images/index/index_sprite.png on http://www.whatclinic.com/ positioned in the css.

Giblet

To be honest, I think that's overkill in your example. I think sprites should be a logical grouping of similar images such as toolbar buttons, or different states of the same buttons or button groups, ie: Nav bar images + rollovers. I wouldn't go putting every image there. There is probably diminishing returns doing it that way either. If loading a single 200k image on a single connection is capped at 150k/s per connection to the server, it would be better loading 2 images in parallel that are 150k each. (Extreme example, but you can download multiple images in parallel.)

tricky D

That one is a bit overkill. I see some point in using sprites. However, all things considered, I would rarely think of using them - just not a fan. There's something less than elegant about them imo and images work just fine.