Use sprites for avatars

It may make sense to use a CSS spriting technique to show avatars on a busy site.

http://www.alistapart.com/articles/sprites

Here, we'd combine a group of avatars into a single image, and use CSS to show only parts of that image in each slot on the page.

It would probably make the most sense with the mini-avatars that show up in the sidebar. We show a max of 27x3 = 81 of these on a page. If we could reduce the number to 3 (one for subscriptions, one for subscribers, one for groups) we'd have significantly fewer images to download to the browser. The files are 1-2kB right now, so bundled images would be 30-60kB apiece -- pretty quick with most sites. And we'd save 78 HTTP hits! We do about 100 HTTP hits for avatars on the profile page, so this would be a huge savings.

How could it work? We could store an additional data item for each user -- information on the sprited image for their profile page. It would also include the IDs of the users and groups whose avatars are in that sprited image. Then, when showing the subscription sidebar item, we'd check to see if the user's in the sprite; if so, we do the magic code to show their image from the sprite; otherwise we fallback to their regular avatar.

We could have an offline queue handler to handle updates to the subscription/subscriber/group list. After a subscription, the sprite wouldn't contain the most recent item, but it would still be useful for the 26 other ones in the list. The queue handler could gradually get around to building an image for those.