title: Optimizing image load times. (thinking differently)
body: <p>I've created an interactive image thing...but it takes a little too long to load.</p>
  
  <p>The interactive image thing is located at:</p>
  
  <pre><code>southernwindowdesign.com
  </code></pre>
  
  <p>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).</p>
  
  <p>Any ideas for reducing the load time? I'm willing to venture into using data URIs, canvas, <a href="http://blog.nihilogic.dk/2008/05/compression-using-canvas-and-png.html" rel="nofollow noreferrer">PNG compression (cool)</a>, etc.</p>
  
  <p>Any ideas or pointers at all will be helpful.</p>
  
  <p><strong>UPDATE:</strong>
  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.</p>
  
  <p>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?</p>
  
  <p>I tried a getImageData approach on <a href="http://www.eswd.com/southern/test.jpg" rel="nofollow noreferrer">http://www.eswd.com/southern/test.jpg</a> which, because of jpeg's losslessness (Quality=100 != 100%), comes up with this: <a href="http://www.eswd.com/southern/test.aspx" rel="nofollow noreferrer">http://www.eswd.com/southern/test.aspx</a>. 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).</p>
  
  <p>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.</p>