I tre principi di ottimizzazione immagine

Stai perdendo visitatori del tuo sito web a causa di rallentare i tempi di caricamento della pagina? Il tuo sito è penalizzato perché le immagini sul vostro sito sono troppo grandi? Siete in grado di catturare l'attenzione del visitatore nei primi 10-15 secondi che sono sul tuo sito?

Tutti questi problemi possono essere causati da una pagina web ottimizzata in modo improprio. In altre parole, la pagina si carica troppo lentamente e il vostro visitatore lascia prima di avere avuto la possibilità di agganciarli.

Ottimizzare una pagina per i tempi di caricamento rapido può essere suddiviso in 3 grandi categorie: la codifica di base della pagina, gli script che vengono utilizzati nella pagina, e le immagini. Di questi tre, le immagini che sono troppo grandi può avere l'impatto più significativo sui tempi di caricamento e quindi hanno il maggiore potenziale di migliorare i tempi di caricamento pagina se opportunamente ottimizzato.

Un primer brevemente i tipi di immagine

Ci sono molti formati di immagine di uso comune sui siti web, i tre più popolari GIF essere, JPEG e, in misura minore contenuto Flash. Saremo limitare la nostra discussione di immagini GIF e JPEG, con un focus specifico sulle immagini.

Ognuno di questi formati di immagine ha i suoi punti di forza e di debolezza. GIF o Graphics Interchange Format è stato sviluppato dalla CompuServe prima del boom di Internet come un modo per condividere le immagini sul servizio CompuServe. A causa di limitazioni con risoluzioni dello schermo e profondità di colore, al momento, le immagini GIF sono stati limitati a mostrare fino a 256 colori, più colori sono stati imitati da Dithering, un processo di ingannare l'occhio nel vedere un colore utilizzando 2 o più serie di punti di colore distanziati troppo da vicino per l'occhio di distinguere separatamente.

Immaginatevi una scacchiera con quadrati bianchi e neri. Se visti da vicino si possono vedere distintamente le singole piazze, ma se siamo indietro abbastanza lontano non saremo più in grado di discernere le singole piazze e invece vedremo un grande quadrato grigio, i quadrati bianchi e neri si fondono insieme ai nostri occhi per forma un colore solido. Questo è il concetto dietro il dithering.

Il formato file JPEG invece è un nuovo formato in grado di gestire milioni di colori facilmente. Lo svantaggio iniziale per le immagini JPEG è che essi contengono molti più colori, ed ogni colore richiede un po 'di codifica per la visualizzazione, rendendo il file di dimensioni maggiori.

Accelerare i tempi di caricamento immagine

L'idea principale dietro fare un caricamento dell'immagine più veloce è quello di rendere le dimensioni del file. Questo può essere realizzato in due modi, è possibile rendere le dimensioni dell'immagine più piccola, o diminuire la quantità di codice che è necessario per visualizzare l'immagine.

off abbastanza lontano non saremo più in grado di discernere le piazze individuale e invece vedremo un grande quadrato grigio, i quadrati bianchi e neri fusione insieme ai nostri occhi per formare un colore solido. Questo è il concetto dietro il dithering.

Il formato file JPEG invece è un nuovo formato in grado di gestire milioni di colori facilmente. Lo svantaggio iniziale per le immagini JPEG è che essi contengono molti più colori, ed ogni colore richiede un po 'di codifica per la visualizzazione, rendendo il file di dimensioni maggiori.

Accelerare i tempi di caricamento immagine

L'idea principale dietro fare un caricamento dell'immagine più veloce è quello di rendere le dimensioni del file. Questo può essere realizzato in due modi, è possibile rendere le dimensioni dell'immagine più piccola, o diminuire la quantità di codice che è necessario per visualizzare l'immagine.

Il modo più semplice per ridurre un file di immagini di dimensioni è quello di ridurre le dimensioni fisiche dell'immagine. In altre parole, minore è l'immagine, la più piccola è la dimensione del file. Immaginate una immagine che è un quadrato da 80 pixel 80 pixel. Il numero di pixel contenuto in l'immagine è 80x80 o 6400 pixel individuali. Se riduciamo le dimensioni dell'immagine da una metà a 40 pixel per 40 pixel allora abbiamo 40x40 o 1600 pixel. Riducendo così le dimensioni delle immagini a metà riduce la dimensione del file ad un quarto dell'originale.

Questo è il nostro Primo Principio di Riduzione delle dimensioni del file immagine: utilizzare la dimensione più piccola immagine che funzionerà con il layout. E allo stesso modo le immagini meno sulla pagina, il minor numero di pixel dell'immagine, quindi più piccola è la dimensione della pagina.

Dal momento che i formati immagine GIF e JPEG utilizzare diversi metodi di salvare le informazioni dell'immagine, tendono ad essere migliori a mostrare alcuni tipi di immagini e peggio a mostrare agli altri.

Immagini GIF, dal momento che sono limitate a 256 colori per immagine, sono meglio la visualizzazione di immagini con grandi blocchi solidi di colore e immagini con dimensioni fisiche molto ridotte. Il formato GIF producono file di dimensioni inferiori rispetto a JPEG per questi tipi di immagini.

Le immagini JPEG sono meglio a mostrare sfumature o sottili cambiamenti da un colore all'altro. JPEG quindi riprodurre fotografie molto bene, o qualsiasi altra immagine con gradazioni. Il formato JPEG producono file di dimensioni più piccole per questi tipi di immagini rispetto al formato GIF.

Questo è il nostro Secondo Principio di Riduzione delle dimensioni del file immagine: Scegli il formato corretto immagine per l'immagine che state usando. La maggior parte delle pagine web contengono una combinazione di immagini GIF e JPEG.

Diminuendo la codifica si chiama compressione delle immagini. Entrambe le immagini GIF e JPEG può essere compresso, ma il processo è diverso. Nelle immagini GIF cerchiamo di limitare il numero di colori, in un'immagine JPEG che usiamo algoritmi software per rimuovere le informazioni ridondanti dal file.

immagine che è un quadrato di 80 pixel 80 pixel. Il numero di pixel contenuto in l'immagine è 80x80 o 6400 pixel individuali. Se riduciamo le dimensioni dell'immagine da una metà a 40 pixel per 40 pixel allora abbiamo 40x40 o 1600 pixel. Riducendo così le dimensioni delle immagini a metà riduce la dimensione del file ad un quarto dell'originale.

Questo è il nostro Primo Principio di Riduzione delle dimensioni del file immagine: utilizzare la dimensione più piccola immagine che funzionerà con il layout. E allo stesso modo le immagini meno sulla pagina, il minor numero di pixel dell'immagine, quindi più piccola è la dimensione della pagina.

Dal momento che i formati immagine GIF e JPEG utilizzare diversi metodi di salvare le informazioni dell'immagine, tendono ad essere migliori a mostrare alcuni tipi di immagini e peggio a mostrare agli altri.

Immagini GIF, dal momento che sono limitate a 256 colori per immagine, sono meglio la visualizzazione di immagini con grandi blocchi solidi di colore e immagini con dimensioni fisiche molto ridotte. Il formato GIF producono file di dimensioni inferiori rispetto a JPEG per questi tipi di immagini.

Le immagini JPEG sono meglio a mostrare sfumature o sottili cambiamenti da un colore all'altro. JPEG quindi riprodurre fotografie molto bene, o qualsiasi altra immagine con gradazioni. Il formato JPEG producono file di dimensioni più piccole per questi tipi di immagini rispetto al formato GIF.

Questo è il nostro Secondo Principio di Riduzione delle dimensioni del file immagine: Scegli il formato corretto immagine per l'immagine che state usando. La maggior parte delle pagine web contengono una combinazione di immagini GIF e JPEG.

Diminuendo la codifica si chiama compressione delle immagini. Entrambe le immagini GIF e JPEG può essere compresso, ma il processo è diverso. Nelle immagini GIF cerchiamo di limitare il numero di colori, in un'immagine JPEG che usiamo algoritmi software per rimuovere le informazioni ridondanti dal file.

Ogni volta che comprimere un file perderemo qualche qualità delle immagini. Dobbiamo raggiungere un equilibrio tra un file di piccole dimensioni e la qualità dell'immagine accettabile.

Questo è il nostro terzo principio della riduzione Dimensione file di immagine: Trovare il livello minimo accettabile di qualità delle immagini. Maggior parte delle immagini in grado di gestire alcuni compressione con perdita di qualità molto poco, e tutte le immagini può stare di più la perdita di qualità dell'immagine ed essere ancora accettabile. Il vostro compito è quello di decidere quanto la perdita di qualità è possibile accettare. In altre parole, più bassa è la qualità, la più piccola è la dimensione del file.

Le immagini GIF di solito può essere ridotto da 256 colori a 128 colori o meno, i colori meno utilizzati minore è la dimensione del file. Immagini JPEG possono quasi sempre essere ridotta a un'impostazione di qualità del 80% e spesso può essere ridotta fino a un minimo di 15-30%. Così, quando si utilizza un livello di compressione più elevato (più piccolo numero) la dimensione del file sarà ridotto. Esperimento con l'immagine, provare le impostazioni più piccoli fino a trovare il più piccolo ambiente che mostra ancora una qualità accettabile.

La pagina più veloce il caricamento avrà nessuna immagine e la pagina più lento il caricamento sarà completamente riempito con immagini a piena risoluzione. Se si lavora per controllare le immagini utilizzando i principi di cui sopra si avrà una pagina Web molto snella che caricherà in modo rapido ed essere vista favorevolmente dai motori di ricerca.