Immagini per il web

Formati di immagine ad alta risoluzione per i siti web JPEG 2000 - WebP - JPEG XR - BPG

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  

 

Contattami!