Ottimizzando i tempi di caricamento immagine. (Pensare in modo diverso)

Question

Ho creato una cosa immagine interattiva ... ma ci vuole un po 'troppo tempo a caricarsi.

La cosa immagine interattiva si trova in:

southernwindowdesign.com

Si utilizza 5 immagini per passo attraverso ogni stato (cliccando e trascinando). Voglio mantenere le immagini di alta qualità; così, ogni ulteriore compressione JPEG è fuori (compresi punypng e smush.it).

Tutte le idee per ridurre il tempo di caricamento? Sono disposto ad avventurarsi in utilizzando URI dati, tela, compressione PNG (cool) , ecc.

Tutte le idee o puntatori a tutti sarà utile.

UPDATE: Grazie a tutti coloro che hanno dato un consiglio, se ho usato il consiglio che hai dato, ti ho dato un più uno. Ho installato un altro sottodominio statico (s2) che dovrebbe propagarsi nelle prossime ore o giù di lì. Più tardi oggi io probabilmente cambiare alcune delle immagini a questo nuovo sottodominio. Ho anche cambiato l'ordine immagini vengono caricate e fatto alcune altre ottimizzazioni qua e là.

Speravo che qualcuno sapeva di un modo per sfruttare i pixel ridondanti in ciascuna immagine. C'è un modo per codificare tutte le immagini in un unico file e leggerli utilizzando getImageData della tela di javascript () in qualche modo intelligente?

Ho provato un approccio getImageData su http://www.eswd.com/southern/test .jpg che, a causa di losslessness di jpeg (! Qualità = 100 = 100%), esce con questo: http://www.eswd.com/southern/test.aspx . che non è buono. Salvare l'immagine come PNG utilizzando la stessa tecnica portato ad un file di dimensioni più grande di un jpeg con tutti i dati (senza bordo rosso).

Sto pensando cercando di lavorare con .APNG e la lettura dei dati di pixel in quel modo ... ma perché il formato è così presto nel suo sviluppo esso non sembra che sarebbe ridurre le dimensioni dei file a tutti ... e io non sono sicuro se tela mi permetteranno di leggere i singoli fotogrammi PNG nell'animazione.

Answer 1

L'intera pagina di caricamento fa 40 richieste HTTP, di cui circa 20 richieste di immagine per loghi e in modo tale che il carico prima della porta scorrevole immagini. Sprite quelle altre 20 immagini. Poi la porta scorrevole immagini non caricare fino a dopo main.js sono stati caricati. Questo file è solo 1kb - che probabilmente non si ottiene molto beneficio dal caching esso. Penso che si dovrebbe provare inlining quello script nella pagina, quindi è possibile caricare la porta scorrevole immagini prima.

Si dovrebbe usare uno strumento come Firebug pannello di rete o HttpWatch che permette di vedere un grafico cascata di risorse carico per ottimizzare le richieste in modo che la porta scorrevole immagini carico al più presto possibile. Leggi questo post sul Firebug rete del pannello per assicurarsi si utilizza le versioni che vi danno la tempistica più precisa.

Answer 2

Crea un'immagine si utilizza come un folletto? http://www.alistapart.com/articles/sprites/

Answer 3

C'è molto che si può fare.

Per quanto mi riguarda, il codice HTML da solo ha preso circa 7 secondi per caricare la prima volta -. Circa la metà del tempo totale

Si potrebbe desiderare di concentrarsi sulle prestazioni percepite. Per le immagini di grandi dimensioni, una sola idea è quella di caricarli nel gestore pagina di OnLoad, in modo da non ritardare il tempo impiegato dal resto della pagina per essere reso.

Oltre a sprite, è anche possibile dividere le immagini tra i più sottodomini di aumentare il parallelismo scaricare.

L'unico inconveniente: è possibile rimuovere il meta tag per il file .ico. Il modo in cui è ora, che è una delle prime immagini caricate; non è una priorità, in modo che possa aspettare.

Inoltre, la gif animata loading.gif viene caricato dopo lo step1.jpg a step5.jpg. Se si ha realmente bisogno, è necessario caricare prima.

In caso aiuta, ho scritto un intero capitolo nel mio libro su questi tipi di ottimizzazioni, tra cui come controllare ordine di caricamento delle immagini, ecc: Ultra-fast ASP.NET .

Answer 4

Ho cercato diverse ottimizzazioni contenuto dell'immagine da applicare, ma è l'unico che soddisfa le vostre esigenze è l'immagine porte di base, http://s.southernwindowdesign.com/i/home/animateDoor2/step1.jpg si noti che la striscia di fondo è coperto sulla pagina web. Questo potrebbe essere ritagliata fuori. Non è intenzione di salvare più di pochi byte però.