Optimizing image load times. (thinking differently)

Question

I've created an interactive image thing...but it takes a little too long to load.

The interactive image thing is located at:

southernwindowdesign.com

It uses 5 images to step through each state (by clicking and dragging). I want to keep the images high-quality; so, any further jpeg compression is out (including punypng and smush.it).

Any ideas for reducing the load time? I'm willing to venture into using data URIs, canvas, PNG compression (cool), etc.

Any ideas or pointers at all will be helpful.

UPDATE: Thanks to everyone who gave advice, if I used the advice you gave, I gave you a plus one. I've set up another static subdomain (s2) which should propagate over the next few hours or so. Later today I'll probably switch some of the images to this new subdomain. I've also changed the order images are loaded and made some other optimizations here and there.

I was hoping someone knew of a way to take advantage of the redundant pixels in each image. Is there a way to encode all the images into one file and read them out using javascript's canvas's getImageData() in some clever way?

I tried a getImageData approach on http://www.eswd.com/southern/test.jpg which, because of jpeg's losslessness (Quality=100 != 100%), comes up with this: http://www.eswd.com/southern/test.aspx. which is no good. Saving the image as a PNG using the same technique resulted in a larger file size than a jpeg with all data (no red border).

I'm considering trying to work with .APNG and reading the pixel data that way...but because the format is so early in its development it doesn't seem like it would shrink the file size at all...and I'm not sure if canvas will let me read the individual PNG frames in the animation.

Answer 1

Make one image you use as a sprite? http://www.alistapart.com/articles/sprites/

Answer 2

The whole page loading makes 40 http requests, including about 20 image requests for logos and such that load before your door sliding images. Sprite those other 20 images. Then the door sliding images don't load until after main.js has loaded. That file is only 1kb--you probably don't get much benefit from caching it. I think you should try inlining that script in the page, so it can load the door sliding images sooner.

You should use a tool like Firebug net panel or HttpWatch that lets you see a waterfall chart of resources loading to optimize the requests so that the door sliding images load as soon as possible. Read this post on the Firebug net panel to make sure you are using versions which give you the most accurate timing.

Answer 3

I looked for several image content optimizations to apply, but the only one which meets your requirements is the base doors image, http://s.southernwindowdesign.com/i/home/animateDoor2/step1.jpg Notice that the bottom strip is covered up on the web page. That could be cropped off. It's not going to save more than a few bytes though.

Answer 4

There's a lot you can do.

For me, the HTML by itself took about 7 seconds to load the first time -- about half the total time.

You might want to focus on perceived performance. For the large images, one idea is to load them in the page OnLoad handler, so they don't delay the time it takes the rest of the page to be rendered.

In addition to sprites, you can also split the images among multiple subdomains to increase download parallelism.

One minor thing: you could remove the meta tag for the .ico file. The way it is now, that's one of the first images loaded; it's not a priority, so it can wait.

Also, the loading.gif animated gif is loaded after the step1.jpg to step5.jpg. If you really need it, you should load it first.

In case it helps, I wrote a whole chapter in my book about these types of optimizations, including how to control image load order, etc: Ultra-Fast ASP.NET.