I have many many small images that are displayed on a user's profile and the loading of this page is horrible. The best solution is to sprite them all, but sadly I have too many images for that and only a few hundred are used per profile.
So, I'm trying to get the second best solution. What headers should I send? ETag? Expires? Cache-Control? Right now I have:
http://metaward.com/media/award/ofwjh3.png
Last-Modified Sat, 11 Jul 2009 22:37:49 GMT
Cache-Control max-age=2592000
Expires Tue, 29 Sep 2009 22:41:21 GMT
And an example page with lots of images (to show how slow they load, even when cached) :
http://metaward.com/6
Sometimes the user will also change their profile picture, but there is only one of those so I'm not as worried about caching.
In this case you should use a "far future expires" to maximize cache hits. This means if you change an image, you need to give it a new name, but I can't imagine you're changing them often given that there are so many.
You really have 100s of images on the page, and you should sprite them. Perhaps there are some more common ones (your recommended) that you can start with to see whether it helps. Or maybe you could do a sprite of those "least likely to change".
Caching might help a little when a visitor moves from profile to profile, and serving the images from different subdomains with persistent connections could help speed delivery but the real performance killer is simply the number of HTTP requests. If you can identify two or more images that appear together more than 50% of the time, it seems it would be worthwhile to combine them into a sprite in a regularly-scheduled offline process. If resources permit, it might even be possible to use a image manipulation library e.g. php-gd to combine and serve blocks of images at runtime.
