Question

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.

Answer 1

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”.