Formati di immagine ad alta risoluzione per siti web

Si dice spesso che un'immagine vale più di mille parole, ma come potete assicurarvi di estrarre tutto questo valore? Esiste un modo per far valere ancora di più le vostre immagini? Scegliere il formato ottimale per un'immagine inviata a un determinato dispositivo con particolari condizioni di rete mediante uno specifico browser può aiutarvi a massimizzare l'impatto della vostra immagine.

In questo articolo esamineremo le possibilità, le caratteristiche e la compatibilità dei più comuni formati di immagine attualmente utilizzati nei siti web: GIF, JPEG e PNG. Forniremo inoltre le stesse informazioni per alcuni formati introdotti di recente (e legati a specifici browser): WebP, JPEG 2000 e JPEG XR. Infine esamineremo BPG (Better Portable Graphics), un nuovo formato di immagine progettato per sostituire JPEG.

GIF

GIF (Graphics Interchange Format) è un formato di immagine bitmap che ha avuto una notevole diffusione su web grazie al suo ampio supporto e alla sua portabilità.

Questo formato supporta fino a 8 bit per pixel per ogni immagine, che quindi può utilizzare fino a 256 colori diversi. Inoltre supporta l'animazione (con una tavolozza separata di 256 colori per ogni fotogramma) e la trasparenza a 1 bit.

Chrome
Chrome (iOS)
Firefox    
Safari
IE/Edge
Opera


Sì    


JPEG

JPEG (Joint Photographic Experts Group) è un formato di file grafico con perdite. Le immagini JPEG hanno estensioni dei file diverse, tra cui .jpg, .jpe, .jif, .jfif e .jfi. I file JPG hanno 2 sotto-formati, JPG/Exif (per fotocamere e apparecchiature fotografiche digitali) e JPG/JFIF (per il web).

JPEG supporta fino a 16,8 milioni di colori diversi. JPEG non supporta animazione né trasparenza.

Chrome
Chrome (iOS)
Firefox    
Safari
IE/Edge
Opera


Sì    


PNG

I file PNG (Portable Network Graphics) sono un formato senza perdite, ossia la compressione non incide sulla qualità dell'immagine. PNG è stato creato per sostituire GIF (Graphics Interchange Format) con una versione open source migliorata ed è il formato di compressione senza perdite più utilizzato su Internet.

PNG-8 supporta 256 colori e la trasparenza a 1 bit, mentre PNG-24 supporta 24 bit e 16,8 milioni di colori. PNG supporta la trasparenza scalabile (da opaco a completamente trasparente) mediante un canale alfa.

L'animazione è supportata tramite l'estensione APNG (Animated Portable Network Graphics). Questa consente di creare file PNG animati che funzionano in modo simile ai file GIF animati, con il supporto per immagini a 24 bit e per la trasparenza a 8 bit non disponibili per i file GIF. Inoltre mantiene la compatibilità con i file PNG non animati. Finora il formato APNG non si è affermato e quindi non è supportato dalla maggior parte dei principali browser.

Chrome
Chrome (iOS)
Firefox    
Safari
IE/Edge
Opera
Base

Sì    

>=7
Animato No

Sì    

No
No

WebP

WebP è un formato di immagine moderno sviluppato da Google che impiega sia la compressione con perdite che quella senza perdite. Questo formato aperto è diventato ampiamente disponibile nel 2010, allo scopo di fornire un nuovo standard di compressione con perdite per la grafica web. Come JPEG può produrre grafica a 16,8 milioni di colori con dimensioni dei pacchetti ridotte, mantenendo una qualità dell'immagine simile.

WebP supporta 24 bit e 16,8 milioni di colori. Supporta inoltre l'animazione, i profili ICC, i metadati XMP e le trasparenze mediante canale alfa.

Oltre al formato semplice/di base, WebP supporta anche formati estesi e animati. Il contenitore esteso consente di integrare metadati avanzati, tra cui profilo colori, controllo dell'animazione, EXIF e XMP. Il formato di immagine animato include fotogrammi multipli insieme a blocchi ANIM (parametri globali di animazione) e ANIMF (informazioni su singoli fotogrammi).

Chrome
Chrome (iOS)
Firefox    
Safari
IE/Edge
Opera
Base >=9
>=29
No  
No
No
>=11,5
Animato >=32
No
No   
No
No
>=20
Esteso >=23
>=29
No   
No
No
>=12,1

JPEG 2000

JPEG 2000 (JP2) è uno standard e un sistema di codifica per la compressione delle immagini con e senza perdite. È stato creato nel 2000 dal comitato del Joint Photographic Experts Group per prendere il posto dello standard JPEG. Benché JP2 possa supportare qualsiasi profondità in bit dei colori, la maggior parte delle implementazioni utilizza il colore a 24 bit.

JP2 (basato su wavelet) non è compatibile con il precedente standard JPEG (basato su DCT). JP2 supporta la trasparenza ma non l'animazione.

Chrome
Chrome (iOS)
Firefox    
Safari
IE/Edge
Opera
No

No
>=5
No
No

JPEG XR

JPEG XR (eXtended Range) è uno standard e un formato di file per la compressione con e senza perdite di immagini fotografiche a tinta continua, basato su una tecnologia originariamente sviluppata e brevettata da Microsoft con il nome di HD Photo. JPEG XR supporta un'intensità di colore fino a 32 bit e la trasparenza mediante un canale alfa. JPEG XR non supporta l'animazione.

Chrome
Chrome (iOS)
Firefox    
Safari
IE/Edge
Opera
No
No No     No
>=10
No

BPG

BPG (Better Portable Graphics) è un nuovo formato di immagine il cui scopo è sostituire il formato JPEG nei casi in cui sono importanti la qualità o le dimensioni dei file. Vanta un rapporto di compressione elevato, che produce file molto più piccoli rispetto ai JPEG di qualità equivalente. BPG supporta la compressione con e senza perdite, la trasparenza mediante canale alfa, l'animazione e i metadati integrati (profili di colore e metadati XMP ed EXIF). BPG supporta 14 bit di colore per canale (in confronto agli 8 bit per canale del formato JPEG).

Attualmente nessun browser offre supporto nativo per BPG: per visualizzare immagini BPG è necessaria una libreria JavaScript di 56 KB (compressa in formato gzip).

Sommario

La tabella seguente riassume e fornisce dettagli aggiuntivi sulle possibilità e le caratteristiche di ognuno dei formati di immagine esaminati.

GIF
JPEG PNG: base PNG: animato
JPEG 2000
JPEG XR
WebP: base WebP: Esteso WebP: animato
Colori indicizzati

No


No
No No No No  
Tutti i colori
No

Sì  
Sì  
Trasparenza binaria

No
Sì   No
No No No No  
Trasparenza completa
No 
No 
Sì  
No
No
No
No  
Sottocampionamento della crominanza
No

No   No  Sì 
4:2:0 4:2:0 4:2:0  
Caricamento progressivo


Sì  

No
No
No  
Animazione
No
No  

No No No
No
Sì  
Compressione con perdite


Sì  



Sì  
Compressione senza perdite
No
No
Sì  

No
Sì  
Risparmio in byte
Scarso
Moderato
Scarso  
Moderato
Buono
Buono Buono
Buono
Buono  

Scoprite di più sulla gestione dei più diffusi formati di immagine online con Akamai Image Manager.