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