Handling image-heavy web pages

Question

I have a list of TV shows which is about 200 shows long. Each of these shows has a little image, 40x60 pixels and 3 kB, and they are all listed on the same page at the same time.

Now I'm starting to think that maybe it's not such a great idea to have about 200 requests to the server each time the page is being viewed.

What is the best way to solve things like this without having to deviate from the graphical design of the page? Should I use some sort of "lazy loading" using JavaScript? Should I stick all of these in one big image and use a bunch of hackish CSS to make it only one request?

Answer 1

I think you may have a few options

• Paginate
• Lazy load via JavaScript
• CSS sprites
• and/or a CDN

Pagination is very common and I think works well with users. Lazy loading works for every JavaScript user (almost all).

Spriting could be achieved by grabbing 20 at a time for example and making one large image. I'd say use 20 at a time so the user doesn't have to wait for a super large image to download before they can see any.

You could use PHP and GD to grab each image in groups of 20, and then stitch them together, record their offsets and then print it to your stylesheet.

Your CDN should be setup to not have cookies sent (different domain, or subdomain if your site uses www). You can also configure this server to optimise it for delivering static content.

Wrikken also makes a good point about sending far forward expiry headers (vote him up!). Don't forget to add some sort of versioning in case you need to update the images, and want to keep the same filename.