Share
Ti sei mai chiesto quale sia la differenza tra immagini JPEG, GIF e PNG che usiamo sul web? Come designer - e soprattutto come web designer - è importante conoscere la differenza tra i diversi formati di immagine e come usarli in ogni situazione. Questo articolo spiegherà come utilizzarli per ogni situazione per mantenere le dimensioni dei file piccole e la qualità dell'immagine elevata. Lo stiamo archiviando sotto "Basix", ma le informazioni dovrebbero essere interessanti per chiunque stia cercando una comprensione più profonda dei formati di immagine.
Per utilizzare al meglio uno strumento, è necessario prima capire come funziona lo strumento. Per capire come utilizzare meglio i tipi di immagine, dobbiamo vedere come funziona il loro algoritmo di compressione. Lo so, lo so, non sei un fanatico dei numeri e a chi importa davvero? È come guidare una macchina però; puoi guidarlo meglio quando sai come interagiscono tutte le piccole parti. Inoltre, quando qualcosa va storto, sai come risolverlo!
JPEG è stato sviluppato dal Joint Photographic Experts Group. Come avrai intuito, funziona bene per i tipi di immagini naturali (fotografia). I tipi di immagini naturali, come la fotografia, hanno variazioni di colori uniformi, il che significa che il formato JPEG funziona anche bene per le immagini che contengono sfumature e toni e colori diversi.
Un punto importante su JPEG è che sono generalmente un lossy formato, a meno che non si utilizzi un'altra variante senza perdita di dati. La compressione lossy è semplicemente una forma di codifica che scarta (perde) alcuni dei suoi dati ... ed è per questo che se si salva un JPG 100 volte, si deteriorerà lentamente nel tempo. Esistono versioni "senza perdita" di JPG, ma queste varianti non sono comuni e non hanno un supporto diffuso. Se è necessario memorizzare i dati delle immagini in un formato senza perdita di dati, è preferibile utilizzare un formato come TIFF o PSD.
Ora per la parte tecnica: il processo di un JPEG divide l'immagine in blocchi 8 × 8 pixel e li esegue attraverso un calcolo DCT (Discrete Cosine Transform) seguito dalla quantizzazione (JPEG 2000, una versione più recente, utilizza una trasformazione wavelet al posto di DCT ).
In parole povere: fondamentalmente guarda i blocchi dell'immagine e determina le piccole variazioni di colore, quindi scarta alcune di quelle variazioni in base al livello di compressione che hai scelto. I dati che vengono scartati vengono completamente rimossi dal file, il che si traduce in un piccolo file. Di conseguenza, questo riduce anche la qualità dell'immagine; Probabilmente sai che se imposti la compressione molto in alto, ti ritroverai con un'immagine pixelata degradata ... mentre le impostazioni di compressione più basse avranno come risultato un'immagine di qualità più elevata.
GIF (Graphics Interchange Format) è stato sviluppato da CompuServe e utilizza il metodo di compressione LZW (Lempel-Ziv-Welch), che è privo di perdite. Questo metodo di compressione crea una tabella di colori per l'immagine in cui ogni valore di colore viene assegnato ai pixel. Questo metodo di compressione rende questo formato di immagine ideale per disegni al tratto, loghi o altre immagini semplici senza sfumature o colori diversi.
Una nota interessante su questo metodo di compressione è che guarda il cambiamento dei pixel orizzontalmente. Ciò significa che le immagini in cui le variazioni dei colori dei pixel che si verificano più frequentemente in senso orizzontale saranno più grandi delle immagini in cui le variazioni dei colori dei pixel si verificano più frequentemente in verticale. Il formato supporta fino a 8 bit per pixel, il che consente a una singola immagine di fare riferimento a una tavolozza di 256 colori distinti. Puoi usare meno colori (potresti aver visto le immagini GIF usando solo una manciata di colori), il che può portare a risultati interessanti, anche artistici.
Le GIF possono fare altre due cose che i JPEG non possono fare. Innanzitutto, una GIF può utilizzare la trasparenza. In un GIF i pixel sono trasparenti al 100% o opachi al 100%. GIF è anche un formato multi-immagine, quindi puoi usarlo animazione (per il meglio o il peggio).
PNG (Portable Network Graphics) è stato creato per sostituire sostanzialmente o almeno migliorare il formato GIF. PNG utilizza il metodo di compressione DEFLATE, lo stesso algoritmo utilizzato in zip e gzip. Non entrerò nel modo in cui funziona questo metodo di compressione perché è un po 'troppo complicato per questo articolo, ma è una compressione senza perdita di dati. Per questo motivo, il formato PNG tende a produrre immagini di dimensioni maggiori rispetto a JPEG quando viene utilizzato per immagini di tipo fotografico. Se utilizzato per immagini di tipo grafico, PNG consente di ottenere file di dimensioni molto inferiori rispetto a JPEG e dimensioni quasi sempre inferiori rispetto a GIF.
A differenza di GIF, PNG è lo stesso di JPEG nel rispetto del fatto che si tratta di un singolo formato di immagine; significa che PNG non supporta l'animazione. Tuttavia, supporta un vantaggio importante che non supporta JPEG o GIF: trasparenza alfa. I pixel in un'immagine PNG potrebbero essere trasparenti al 50% rispetto al formato GIF, il che richiederebbe che i pixel siano trasparenti al 100% o opachi al 100%. Come puoi immaginare, questo consentirebbe una migliore fusione e grafica più fluida di GIF. PNG implementa anche molti altri miglioramenti rispetto al formato GIF, ma non sono necessari per entrare.
Inutile dire che PNG è un formato molto migliore da usare rispetto a GIF in quasi tutti gli aspetti, con l'eccezione di file molto piccoli (come questo usato nei pattern di sfondo). Il formato PNG ha attirato l'attenzione dei progettisti web in quanto non compatibili con alcuni browser Web meno recenti, ma il problema può essere risolto in buona parte attraverso alcuni script eccezionali al giorno d'oggi, come lo script DD_Belated.
Come probabilmente saprai, esistono due tipi principali di PNG.
Di seguito sono riportate due immagini di esempio che utilizzerò per mostrare come e quando utilizzare ciascun formato di immagine. Potresti già avere familiarità con questi metodi, ma se non li hai davvero studiati, merita una recensione.
Come puoi vedere, l'immagine sotto è di natura fotografica con colori e toni che variano selvaggiamente. Ovviamente, non tutte le immagini useranno questi molti colori, ma questa immagine è ottima da usare come esempio di utilizzo del formato JPEG.
L'immagine sotto mostra la compressione JPEG da un'impostazione di qualità del 100% fino allo 0%. Con una qualità del 100%, l'immagine sembra senza perdita di dati, ma i dati vengono ancora scartati dall'immagine originale. L'occhio umano non può vedere la perdita di dati in quanto è minuscolo. Al 50% la qualità dell'immagine subisce un calo notevole, ma, come puoi vedere, la dimensione del file è superiore a 100K. Questa è un'enorme differenza con una perdita di qualità visiva alquanto minima. Al 25% l'immagine inizia davvero a sembrare pessima e non ha salvato molte dimensioni extra del file. A 0%, l'immagine sembra orribile e, sebbene l'immagine sia una dimensione del file molto più piccola rispetto all'impostazione del 100%, il compromesso non vale la pena.
Questa immagine probabilmente avrà un aspetto migliore con una qualità del ~ 65% che ridurrebbe le dimensioni dell'immagine di quasi 100K. Per determinare le migliori impostazioni da utilizzare per un JPEG, ridurre lentamente il cursore fino a quando non si può iniziare a vedere che la qualità dell'immagine peggiora davvero. Quindi sposta nuovamente la qualità di circa il 5-10% circa.
Sappiamo che questo JPG sembra decente per il web; Diamo un'occhiata ad alcuni confronti di dimensioni file / qualità per gli altri formati:
GIF risultati in una dimensione del file 63.77K e un'immagine orribile.
PNG8 risulta in una dimensione del file di 53,52 K a causa dei metodi di compressione più avanzati, ma ha lo stesso aspetto della GIF.
PNG24 risulta in una dimensione del file di 253,9 K e sembra vicino all'originale, ma non vale la dimensione del file di grandi dimensioni.
La migliore opzione possibile per questo tipo di immagine è JPEG con una qualità ~ 65%; file di piccole dimensioni (39.77K) con perdita di qualità visiva molto ridotta.
Come puoi vedere sotto, l'immagine non usa colori o toni diversi, ma colori solidi. Questa immagine è 5.72K (GIF) e utilizza un totale di 8 colori. Questo rende GIF e PNG8 ottimi formati per la grafica al tratto, i loghi a colori semplici, ecc. PNG8 sarebbe una scelta migliore in quanto si traduce in una dimensione di file più piccola (3.54K) grazie al miglior metodo di compressione che usa.
Quando si tenta di salvare una GIF, come l'immagine qui sopra, come JPEG può causare la pixelizzazione o la distorsione dell'immagine. Risulterà sempre in file di dimensioni molto più grandi anche quando hai a che fare con la fotografia e altre immagini ricche. L'immagine sotto è impostata alla massima compressione e produce una dimensione del file di quasi 8K per JPEG contro 5.72K per GIF e 3.54K per PNG8.
A differenza di JPEG e PNG24, GIF e PNG8 consentono di selezionare quanti colori possono essere utilizzati (fino a 256). Nel caso di immagini come logo e disegni al tratto semplici, è possibile ottenere una dimensione di file più piccola selezionando meno colori. Fai attenzione a non selezionare troppo pochi colori in quanto può far sembrare l'immagine molto peggiore.
L'immagine sotto è una PNG8 con trasparenza (GIF ha lo stesso aspetto) di quanto sembra in Photoshop. Quando si utilizza la trasparenza con GIF o PNG8, si desidera impostare il mascherino dell'immagine su qualsiasi colore lo sfondo sia, per una migliore fusione e un'immagine più pulita. Come accennato in precedenza, questo è dovuto al fatto che GIF non supporta la trasparenza alfa e Photoshop non supporta la trasparenza alfa con il formato PNG8 anche se lo supporta (Modifica - questo è stato corretto nelle nuove versioni di Photoshop).
Per fortuna Fireworks ci consente di utilizzare Alpha Transparency con il formato PNG8 (C'mon Photoshop!). Come puoi vedere nell'immagine qui sotto, il gradiente nero è ancora limitato nella variazione del tono, rendendo il gradiente un po 'discontinuo. La cosa grandiosa dell'utilizzo della trasparenza alfa con PNG8 è che si ottiene comunque la dimensione ridotta del file, ma i bordi si fondono in modo uniforme e anche i gradienti minori sembrano grandi.
Un altro vantaggio importante del formato PNG8 è che IE6 supporta l'uso della trasparenza alfa con esso in modo nativo! Ciò significa che per immagini semplici che richiedono trasparenza alfa (ombre, loghi, ecc.) Non è necessario modificare IE6 quando si utilizza la trasparenza alfa e PNG8!
Purtroppo non è possibile salvare un'immagine come PNG8 con trasparenza alfa in Photoshop, quindi è necessario saltare in Fireworks per eseguire questa operazione..
Nel pallet Ottimizza selezionare il formato PNG8 con trasparenza alfa selezionata, quindi fare clic su "Ricostruisci" nell'angolo in basso a destra.
Non è necessario selezionare un colore opaco ed è possibile regolare il numero di colori in base alle proprie esigenze e ridurre le dimensioni del file. Nell'esempio a destra, ho salvato queste impostazioni come "PNG8 Alpha-T" in modo che non sia necessario riselezionare ogni opzione ogni volta che voglio salvare un'immagine PNG8 con trasparenza alfa.
Questo è tutto quello che c'è da fare!
L'uso di PNG24 è fondamentalmente la stessa idea di usare GIF o PNG8, tranne per il fatto che risulterà in una dimensione di file più grande perché supporta una gamma molto più ampia di variazioni di colore. Se hai immagini con gradienti più complessi che richiedono trasparenza o maggiore profondità di colore, PNG24 è la scelta migliore. Sfortunatamente, IE6 non supporta PNG24 in modo nativo; quindi dovrai "hackerarlo" per funzionare correttamente.
I PNG24 sono ottimi nella maggior parte dei casi in cui è necessaria la trasparenza - sono di dimensioni maggiori rispetto al file, ma funzionano bene in casi come loghi di marca in cui la qualità è importante e non si desidera utilizzare un formato con perdita.
Questo è un formato relativamente nuovo di zecca, annunciato solo un paio di settimane fa da Google stessa. Dal loro comunicato stampa:
"Per migliorare la compressione fornita da JPEG, abbiamo utilizzato un compressore di immagine basato sul codec VP8 che Google ha aperto nel maggio 2010. Abbiamo applicato le tecniche di codifica intra frame video VP8 per spingere la busta nella codifica dei fermi immagine. adattato un contenitore molto leggero basato su RIFF, mentre questo formato di contenitore contribuisce a un sovraccarico minimo di soli 20 byte per immagine, è estensibile per consentire agli autori di salvare i meta-dati che vorrebbero memorizzare.
Mentre i vantaggi di un formato di immagine basato su VP8 erano chiari in teoria, dovevamo testarli nel mondo reale. Per valutare l'efficacia dei nostri sforzi, abbiamo scelto a caso circa 1.000.000 di immagini dal web (principalmente JPEG e alcuni PNG e GIF) e le abbiamo ricodificate su WebP senza compromettere in modo percepibile la qualità visiva. Ciò ha comportato una riduzione media del 39% delle dimensioni del file. Ci aspettiamo che gli sviluppatori raggiungano in pratica una riduzione ancora maggiore delle dimensioni dei file con WebP quando si inizia da un'immagine non compressa. "
L'obiettivo qui è semplice: accelerare le immagini sul web usando algoritmi più moderni. La domanda è questa: Will sarà adottato? Google è una società enorme con un vero potere per spingere questo formato alle masse, ma come abbiamo visto con alcuni dei suoi prodotti (sto guardando te Wave!), Anche le grandi idee possono cadere piatte.
"Scalable Vector Graphics" è un formato che non è mai stato considerato come un tipo di immagine ampiamente utilizzato. L'idea alla base di questo formato è quella di consentire la "grafica vettoriale" sul web. Il formato utilizza XML come base per la descrizione di un'immagine 2D sul web. Il supporto del browser per SVG è incoerente, ma se vuoi davvero includere grafica scalabile, vale la pena leggerlo su questo formato.
Nel tuo tempo libero ti incoraggio a scavare un po 'più a fondo in questi formati di immagine e tutto ciò che hanno da offrire. Imparerai molto e saprai esattamente che cosa puoi fare con questi formati di immagine o quali utilizzare per ogni situazione. Il valore delle dimensioni di file super-piccole per le immagini sembra passare mentre la banda larga si espande su Internet, ma la velocità sarà sempre una caratteristica del sito utile e la comprensione di questi formati di immagine è il primo passo per ottimizzare le tue immagini sul web.
Se avete domande o commenti, sentitevi liberi di pubblicarli qui sotto!
Accentsconagua