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 (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ì | Sì | Sì | Sì | Sì | Sì |
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ì | Sì | Sì | Sì | Sì | Sì |
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ì | Sì | Sì | Sì | >=7 | Sì |
Animato | No | Sì | Sì | Sì | No | No |
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 (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 | Sì | No | >=5 | No | No |
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 (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).
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 | Sì | No | Sì | Sì | No | No | No | No | No |
Tutti i colori | No | Sì | Sì | Sì | Sì | Sì | Sì | Sì | Sì |
Trasparenza binaria | Sì | No | Sì | Sì | No | No | No | No | No |
Trasparenza completa | No | No | Sì | Sì | No | No | Sì | No | No |
Sottocampionamento della crominanza | No | Sì | No | No | Sì | Sì | 4:2:0 | 4:2:0 | 4:2:0 |
Caricamento progressivo | Sì | Sì | Sì | Sì | Sì | Sì | No | No | No |
Animazione | Sì | No | No | Sì | No | No | No | No | Sì |
Compressione con perdite | Sì | Sì | Sì | Sì | Sì | Sì | Sì | Sì | Sì |
Compressione senza perdite | No | No | Sì | Sì | Sì | Sì | No | Sì | Sì |
Risparmio in byte | Scarso | Moderato | Scarso | Moderato | Buono | Buono | Buono | Buono | Buono |