Optimize javascript pre-load of images

Question

I was wondering if anyone has any strategies for optimizing the pre-loading of images via javascript?

I'm porting a Flash application into html/css, attempting to recreate the UI as close to the original site as possible. It's essentially a photo browser application, where a high-res image is shown when the user hovers over a link. There's about 50-80 of these images per page.

Pre-loading all the images individually creates a load time significantly longer than that of the Flash application. The amount of data is the same, but I have to assume the longer load time is due to the number of round trips that have to be made to the server for each image.

Also, I'm looking at a significant load time for each page even after the images have been cached, because the page still needs to contact the server for each image to receive the 304 Not Modified code.

Does anyone have any suggestions for speeding this up? Would it make sense to possibly try creating one huge image sprite that gets downloaded in a single request rather than 50-80 smaller images that each take a single request? The goal here is achieve a similar load time to the Flash site.

Thanks. I know this doesn't sound like an ideal way to do things.

Answer 1

I would say using CSS sprites is a big one. Having all your images, or images of a similar nature come down on the one HTTP request really helps load time. Downloading 10 images with a total file size of 100kb is going to be slower than downloading 1 image the same size. It also helps images come down before they are required in the case of hovers and mouse over events and they generally make things a lot smoother.

Here is an article on them.

Answer 2

As you pointed out - one of the most common factors that influences load times for modern web pages are the huge number of small images being sent between the client and server. Some recent studies indicate that for more than 20 images, 80% of your load time is going to be spent in the latency of doing these many gets, not actually doing the downloading!

A tool called SmartSprites is a very handy way to "compile" a single large image from all of your many little images which will accomplish both much faster load times and the prefetching of images. Here's the link http://smartsprites.osinski.name/

Answer 3

If you don't need all the images right away, you can use the window.timeout() function to do some of the work after the page has initialized.

Also, if you use one image in multiple places, you can avoid multiple calls to the server by putting the image into a CSS style and reusing that style instead of the image.

Answer 4

Using a sprite is good if you're OK with that solution. Also, what I'd try is to detect data URI support in that browser and have the script load different stylesheets base on that info. One stylesheets with base 64 encoded data URIs and the other with a real URL to the sprite. The CSS file is also cacheable.

Here's a technique to detect data URIs support or you could use IE conditional comments or... there are some workarounds for sending IE encoded image strings, in multipart HTTP responses.

Answer 5

Use Sprite Me. And don't miss the blog posts about the creation of this tool.

Answer 6

Web Optimizer included both automated CSS Sprites and data:URI + mhtml approaches. It seems you should try it to concatenate all images into a few packages.