Optimize image load times. (thinking differently)

I created an interactive image object ... but loading takes too long.

The interactive image object is located at:

southernwindowdesign.com

It uses 5 images to navigate through each state (by clicking and dragging). I want the images to be high quality; therefore, any further jpeg compression is missing (including punypng and smush.it).

Any ideas for shorter boot times? I am willing to risk using data URIs, canvas, PNG compression (cool) , etc.

Any ideas or pointers in general would be helpful.

UPDATE: Thanks to everyone who gave advice, if I used the advice you gave, I gave you a plus. I set up another static subdomain (s2) that should be distributed over the next few hours or so. Later today I will probably switch some images to this new subdomain. I also changed the loading of order images and made some other optimizations here and there.

I was hoping someone would know how to use redundant pixels in each image. Is there a way to encode all the images into a single file and read them using javascript canvas getImageData () in some smart way?

getImageData http://www.eswd.com/southern/test.jpg, - jpeg losslessness (Quality = 100!= 100%) : http://www.eswd.com/southern/test.aspx. . PNG , jpeg ( ).

, .APNG ... , , ... , canvas PNG .

+3
4

40 HTTP-, 20 , . 20 . , main.js. 1 - , , . , script , .

, , Firebug net HttpWatch, , . Firebug net, , , .

+7

.

HTML 7 - .

. , OnLoad , , .

, parallelism.

: .ico. , ; , .

, gif step1.jpg step5.jpg. , .

, , , , ..: - ASP.NET.

+1

I was looking for several options for optimizing the content of images, but the only thing that meets your requirements is an image with base doors, http://s.southwindowdesign.com/i/home/animateDoor2/step1.jpg Note that the bottom bar is closed on web page. It can be cropped. However, it will not store more than a few bytes.

0
source

Source: https://habr.com/ru/post/1726023/


All Articles