Databases
StackOverflow2013
Postsdbo
POOptimizing image load times. (thinking differently)
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POOptimizing image load times. (thinking differently)
    primarykey
    data
    text
    <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>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USDavid Murdoch
    1. USDavid Murdoch
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POOptimizing image load times. (thinking differently)
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POOptimizing image load times. (thinking differently)
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POOptimizing image load times. (thinking differently)
      1. USParag
      1. VTFavorite
    1. COFWIW, I know you say any further compression is out... but I really think your jpgs are much larger than they need to be. I was able to save almost 370k from step1.jpg alone with no perceptible difference. (Photoshop CS2, save-to-web 60%, good eyes, gamma calibrated, ambient lighting, etc.) I'm sure you can shave off a lot from the other reveal images too. It's just a lot of data to push.
      singulars
      1. POOptimizing image load times. (thinking differently)
      1. USzen
    2. COI agree with zen--the first image (541kb) took 3 seconds for me to load.
      singulars
      1. POOptimizing image load times. (thinking differently)
      1. USAnnie
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload