TIPI COMUNI DI IMMAGINI

Tipi comuni di file immagine
Di seguito sono elencati i formati di file immagine più comunemente utilizzati sul Web.

AbbreviaZIONE	formatO File	MIME type	File extensionI	PANORAMICA
APNG	Animated Portable Network Graphics	image/apng	.apng, .png	Ottima scelta per sequenze di animazione lossless (GIF è meno performante). AVIF e WebP hanno prestazioni migliori ma un supporto browser meno ampio. Supporto: Chrome, Edge, Firefox, Opera, Safari.
AVIF	AV1 Image File Format	image/avif	.avif	Ottima scelta sia per le immagini che per le immagini animate, grazie alle elevate prestazioni e al formato immagine royalty free. Offre una compressione molto migliore di PNG o JPEG con supporto per profondità di colore più elevate, frame animati, trasparenza, ecc. Nota che quando usi AVIF, dovresti includere fallback per formati con un migliore supporto del browser (ad esempio usando l’elemento <picture>). Supporto: Chrome, Edge, Firefox, Opera, Safari.
GIF	Graphics Interchange Format	image/gif	.gif	Ottima scelta per immagini e animazioni semplici. Preferisci PNG per immagini fisse lossless e indicizzate e considera WebP, AVIF o APNG per sequenze di animazione. Supporto: Chrome, Edge, Firefox, IE, Opera, Safari.
JPEG	Joint Photographic Expert Group image	image/jpeg	.jpg, .jpeg, .jfif, .pjpeg, .pjp	Ottima scelta per la compressione lossy di immagini fisse (attualmente la più popolare). Preferisci PNG quando è richiesta una riproduzione più precisa dell’immagine, o WebP/AVIF se sono richieste sia una migliore riproduzione che una compressione più elevata. Supporto: Chrome, Edge, Firefox, IE, Opera, Safari.
PNG	Portable Network Graphics	image/png	.png	PNG è preferito a JPEG per una riproduzione più precisa delle immagini sorgente o quando è necessaria la trasparenza. WebP/AVIF forniscono una compressione e una riproduzione ancora migliori, ma il supporto del browser è più limitato. Supporto: Chrome, Edge, Firefox, IE, Opera, Safari.
SVG	Scalable Vector Graphics	image/svg+xml	.svg	Formato immagine vettoriale; ideale per elementi dell’interfaccia utente, icone, diagrammi, ecc., che devono essere disegnati con precisione in diverse dimensioni. Supporto: Chrome, Edge, Firefox, IE, Opera, Safari.
WebP	Web Picture format	image/webp	.webp	Ottima scelta sia per le immagini che per le immagini animate. WebP offre una compressione molto migliore di PNG o JPEG con supporto per profondità di colore più elevate, frame animati, trasparenza ecc. AVIF offre una compressione leggermente migliore, ma non è altrettanto supportato nei browser e non supporta il rendering progressivo. Supporto: Chrome, Edge, Firefox, Opera, Safari

Nota: i formati più vecchi come PNG, JPEG, GIF hanno prestazioni scadenti rispetto ai formati più nuovi come WebP e AVIF, ma godono di un più ampio supporto “storico” dei browser. I formati di immagine più nuovi stanno riscuotendo sempre più popolarità, poiché i browser senza supporto stanno diventando sempre più irrilevanti (vale a dire, hanno una quota di mercato praticamente pari a zero).

L’elenco seguente include formati di immagine che appaiono sul Web, ma che dovrebbero essere evitati per i contenuti Web (in genere perché non hanno un ampio supporto dei browser o perché ci sono alternative migliori).

Abbreviazione	Formato File	MIME type	Estensione File	Browser Supportati
BMP	Bitmap file	image/bmp	.bmp	Chrome, Edge, Firefox, IE, Opera, Safari
ICO	Microsoft Icon	image/x-icon	.ico, .cur	Chrome, Edge, Firefox, IE, Opera, Safari
TIFF	Tagged Image File Format	image/tiff	.tif, .tiff	Safari
JPEG	Joint Photographic Expert Group image	image/jpeg	.jpg, .jpeg, .jfif, .pjpeg, .pjp	Ottima scelta per la compressione lossy di immagini fisse (attualmente la più popolare). Preferisci PNG quando è richiesta una riproduzione più precisa dell’immagine, o WebP/AVIF se sono richieste sia una migliore riproduzione che una compressione più elevata. Supporto: Chrome, Edge, Firefox, IE, Opera, Safari.
PNG	Portable Network Graphics	image/png	.png	PNG è preferito a JPEG per una riproduzione più precisa delle immagini sorgente o quando è necessaria la trasparenza. WebP/AVIF forniscono una compressione e una riproduzione ancora migliori, ma il supporto del browser è più limitato. Supporto: Chrome, Edge, Firefox, IE, Opera, Safari.
SVG	Scalable Vector Graphics	image/svg+xml	.svg	Formato immagine vettoriale; ideale per elementi dell’interfaccia utente, icone, diagrammi, ecc., che devono essere disegnati con precisione in diverse dimensioni. Supporto: Chrome, Edge, Firefox, IE, Opera, Safari.
WebP	Web Picture format	image/webp	.webp	Ottima scelta sia per le immagini che per le immagini animate. WebP offre una compressione molto migliore di PNG o JPEG con supporto per profondità di colore più elevate, frame animati, trasparenza ecc. AVIF offre una compressione leggermente migliore, ma non è altrettanto supportato nei browser e non supporta il rendering progressivo. Supporto: Chrome, Edge, Firefox, Opera, Safari

Dettagli sul tipo di file immagine

Le sezioni seguenti forniscono una breve panoramica di ciascuno dei tipi di file immagine supportati dai browser Web.

Nelle tabelle sottostanti, il termine bit per componente si riferisce al numero di bit utilizzati per rappresentare ogni componente di colore. Ad esempio, una profondità di colore RGB di 8 indica che ciascuna delle componenti rosso, verde e blu è rappresentata da un valore a 8 bit. La profondità di bit, d’altra parte, è il numero totale di bit utilizzati per rappresentare ogni pixel in memoria.

APNG (Animated Portable Network Graphics)

APNG è un formato di file introdotto per la prima volta da Mozilla che estende lo standard PNG per aggiungere supporto per immagini animate. Concettualmente simile al formato GIF animato che è in uso da decenni, APNG è più capace in quanto supporta una varietà di profondità di colore, mentre GIF animato supporta solo colori indicizzati a 8 bit.

APNG è ideale per animazioni di base che non hanno bisogno di sincronizzarsi con altre attività o con una traccia audio, come indicatori di avanzamento, throbber di attività e altre sequenze animate. Ad esempio, APNG è uno dei formati supportati quando si creano adesivi animati per l’applicazione iMessage di Apple (e l’applicazione Messaggi su iOS). Sono anche comunemente usati per le parti animate delle interfacce utente dei browser web.

Immagine AVIF

AV1 Image File Format (AVIF) è un potente formato di file open source e royalty-free che codifica i bitstream AV1 nel contenitore High Efficiency Image File Format (HEIF).

Nota: AVIF ha il potenziale per diventare la “prossima grande novità” per la condivisione di immagini nei contenuti web. Offre funzionalità e prestazioni all’avanguardia, senza l’ingombro di licenze complicate e royalty di brevetti che hanno ostacolato alternative comparabili.

AV1 è un formato di codifica originariamente progettato per la trasmissione video su Internet. Il formato trae vantaggio dai significativi progressi nella codifica video degli ultimi anni e potrebbe potenzialmente trarre vantaggio dal supporto associato per il rendering hardware. Tuttavia, presenta anche degli svantaggi in alcuni casi, poiché la codifica video e quella delle immagini hanno requisiti diversi.

Il formato offre:

Eccellente compressione lossy rispetto a JPG e PNG per livelli di compressione visivamente simili (ad esempio, le immagini AVIF lossy sono circa il 50% più piccole delle immagini JPEG).
In genere, AVIF ha una compressione migliore di WebP: compressione mediana del 50% contro il 30% per lo stesso set JPG (fonte: confronto AVIF WebP (CTRL Blog)).
Compressione senza perdita di dati.
Archiviazione animazioni/multi-immagine (simile alle GIF animate, ma con una compressione molto migliore)
Supporto canale alfa (ad es. per la trasparenza).
High Dynamic Range (HDR): supporto per l’archiviazione di immagini che possono rappresentare contrasti maggiori tra le parti più chiare e più scure dell’immagine.
Wide Color Gamut: supporto per immagini che possono contenere una gamma di colori più ampia.

AVIF non supporta il rendering progressivo, quindi i file devono essere completamente scaricati prima di poter essere visualizzati. Ciò ha spesso un impatto minimo sull’esperienza utente nel mondo reale perché i file AVIF sono molto più piccoli dei file JPEG o PNG equivalenti e quindi possono essere scaricati e visualizzati molto più velocemente. Per dimensioni di file maggiori l’impatto può diventare significativo e dovresti prendere in considerazione l’utilizzo di un formato che supporti il rendering progressivo.

AVIF è supportato in Chrome, Edge, Opera, Safari e Firefox. Poiché il supporto non è ancora completo (e ha poca profondità storica), dovresti fornire un fallback nel formato WebP, JPEG o PNG utilizzando l’elemento <picture> (o un altro approccio).

BMP (file bitmap)

Il tipo di file BMP (immagine bitmap) è più diffuso sui computer Windows e viene generalmente utilizzato solo per casi speciali in app e contenuti Web.

Attenzione: in genere dovresti evitare di utilizzare file BMP per i contenuti dei siti Web. La forma più comune di file BMP rappresenta i dati come un’immagine raster non compressa, con conseguenti dimensioni di file elevate rispetto ai tipi di immagini png o jpg. Esistono formati BMP più efficienti, ma non sono ampiamente utilizzati e raramente supportati nei browser Web.

BMP supporta teoricamente una varietà di rappresentazioni di dati interne. La forma più semplice e più comunemente utilizzata di file BMP è un’immagine raster non compressa, con ogni pixel che occupa 3 byte che rappresentano i suoi componenti rosso, verde e blu e ogni riga riempita con 0x00 byte fino a un multiplo di 4 byte di larghezza.

Mentre altre rappresentazioni di dati sono definite nella specifica, non sono ampiamente utilizzate e spesso non sono completamente implementate. Queste funzionalità includono: supporto per diverse profondità di bit, colore indicizzato, canali alfa e diversi ordini di pixel (per impostazione predefinita, BMP viene scritto dall’angolo in basso a sinistra verso destra e in alto, anziché dall’angolo in alto a sinistra verso destra e in basso).

In teoria, sono supportati diversi algoritmi di compressione e i dati dell’immagine possono anche essere archiviati in formato JPEG o PNG all’interno del file BMP.

GIF (Graphics Interchange Format)

Nel 1987, il fornitore di servizi online CompuServe ha introdotto il formato di file immagine GIF (Graphics Interchange Format) per fornire un formato grafico compresso che tutti i membri del loro servizio avrebbero potuto utilizzare. GIF utilizza l’algoritmo Lempel-Ziv-Welch (LZW) per comprimere senza perdita di dati la grafica a colori indicizzata a 8 bit. GIF è stato uno dei primi due formati grafici supportati da HTML, insieme a XBM.

Ogni pixel in un GIF è rappresentato da un singolo valore a 8 bit che funge da indice in una tavolozza di colori a 24 bit (8 bit ciascuno di rosso, verde e blu). La lunghezza di una tabella di colori è sempre una potenza di 2 (ovvero, ogni tavolozza ha 2, 4, 8, 16, 32, 64 o 256 voci). Per simulare più di 255 o 256 colori, in genere si utilizza il dithering. È tecnicamente possibile affiancare più blocchi di immagini, ognuno con la propria tavolozza di colori, per creare immagini truecolor, ma in pratica ciò avviene raramente.

I pixel sono opachi, a meno che un indice di colore specifico non sia designato come trasparente, nel qual caso i pixel colorati con quel valore sono completamente trasparenti.

GIF supporta l’animazione semplice, in cui, dopo un fotogramma iniziale a grandezza naturale, vengono fornite una serie di immagini che riflettono le parti dell’immagine che cambiano con ogni fotogramma.

GIF è estremamente popolare da decenni, grazie alla sua semplicità e compatibilità. Il suo supporto all’animazione ha causato una rinascita della sua popolarità nell’era dei social media, quando le GIF animate hanno iniziato a essere ampiamente utilizzate per brevi “video”, meme e altre semplici sequenze di animazione.

Un’altra caratteristica popolare di GIF è il supporto per l’interlacciamento, in cui le righe di pixel vengono archiviate fuori ordine in modo che i file parzialmente ricevuti possano essere visualizzati con una qualità inferiore. Ciò è particolarmente utile quando le connessioni di rete sono lente.

GIF è una buona scelta per immagini e animazioni semplici, sebbene la conversione di immagini a colori in GIF possa causare un dithering insoddisfacente. In genere, i contenuti moderni dovrebbero utilizzare PNG per le immagini fisse indicizzate e senza perdita di dati, e dovrebbero prendere in considerazione l’utilizzo di APNG per le sequenze di animazione senza perdita di dati.

ICO (icona di Microsoft Windows)

Il formato file ICO (icona di Microsoft Windows) è stato progettato da Microsoft per le icone desktop dei sistemi Windows. Tuttavia, le prime versioni di Internet Explorer hanno introdotto la possibilità per un sito Web di fornire un file ICO denominato favicon.ico nella directory principale di un sito Web per specificare una favicon, un’icona da visualizzare nel menu Preferiti e in altri luoghi in cui una rappresentazione iconica del sito sarebbe utile.

Un file ICO può contenere più icone e inizia con una directory che elenca i dettagli su ciascuna. Dopo la directory vengono i dati per le icone. I dati di ciascuna icona possono essere un’immagine BMP senza l’intestazione del file o un’immagine PNG completa (inclusa l’intestazione del file). Se utilizzi file ICO, dovresti utilizzare il formato BMP, poiché il supporto per PNG all’interno dei file ICO non è stato aggiunto fino a Windows Vista e potrebbe non essere ben supportato.

Attenzione: i file ICO non devono essere utilizzati nei contenuti Web. Inoltre, il loro utilizzo per le favicon è diminuito a favore dell’uso di un file PNG e dell’elemento <link>, come descritto in Fornire icone per diversi contesti di utilizzo.

JPEG (Joint Photographic Experts Group image)

Il formato immagine JPEG (tipicamente pronunciato “jay-peg”) è attualmente il formato di compressione lossy più ampiamente utilizzato per le immagini fisse. È particolarmente utile per le fotografie; applicare la compressione lossy a contenuti che richiedono nitidezza, come diagrammi o grafici, può produrre risultati insoddisfacenti.

JPEG è in realtà un formato dati per foto compresse, piuttosto che un tipo di file. La specifica JFIF (JPEG File Interchange Format) descrive il formato dei file che consideriamo immagini “JPEG”.

PNG (Portable Network Graphics)

Il formato immagine PNG (pronunciato “ping”) utilizza una compressione lossless, supportando profondità di colore maggiori rispetto a GIF ed essendo più efficiente, oltre a supportare la trasparenza alfa completa.

PNG è ampiamente supportato, con tutti i principali browser che offrono il supporto completo per le sue funzionalità.

SVG (Scalable Vector Graphics)

SVG è un formato di grafica vettoriale basato su XML che specifica il contenuto di un’immagine come un set di comandi di disegno che creano forme, linee, applicano colori, filtri e così via. I file SVG sono ideali per diagrammi, icone e altre immagini che possono essere disegnate con precisione a qualsiasi dimensione. In quanto tale, SVG è popolare per gli elementi dell’interfaccia utente nel moderno Web design.

I file SVG sono file di testo contenenti codice sorgente che, quando interpretato, disegna l’immagine desiderata.

SVG può essere utilizzato nei contenuti web in due modi:

Puoi scrivere direttamente l’elemento <svg> all’interno dell’HTML, contenente elementi SVG per disegnare l’immagine.
Puoi visualizzare un’immagine SVG ovunque tu possa usare uno qualsiasi degli altri tipi di immagine, inclusi gli elementi <img> e <picture>, la proprietà CSS background-image e così via.

SVG è la scelta ideale per le immagini che possono essere rappresentate usando una serie di comandi di disegno, specialmente se la dimensione in cui l’immagine verrà renderizzata è sconosciuta o può variare, poiché SVG si ridimensionerà senza problemi alla dimensione desiderata. In genere non è utile per immagini strettamente bitmap o fotografiche, sebbene sia possibile includere immagini bitmap in un SVG.

TIFF (Tagged Image File Format)

TIFF è un formato di file grafico raster creato per archiviare foto scansionate, anche se può essere qualsiasi tipo di immagine. È un formato un po’ “pesante”, in quanto i file TIFF tendono a essere più grandi delle immagini in altri formati. Ciò è dovuto ai metadati spesso inclusi, nonché al fatto che la maggior parte delle immagini TIFF non sono compresse o utilizzano algoritmi di compressione che lasciano comunque file piuttosto grandi dopo la compressione.

TIFF supporta una varietà di metodi di compressione, ma i più comunemente utilizzati sono i sistemi di compressione CCITT Group 4 (e, per i vecchi sistemi fax, Group 3) utilizzati dal software fax, nonché la compressione LZW e JPEG con perdita di dati.

Ogni valore in un file TIFF è specificato utilizzando il suo tag (che indica di che tipo di informazione si tratta, come la larghezza dell’immagine) e il suo tipo (che indica il formato in cui sono archiviati i dati), seguito dalla lunghezza della matrice di valori da assegnare a tale tag (tutte le proprietà sono archiviate in matrici, anche per i valori singoli). Ciò consente di utilizzare diversi tipi di dati per le stesse proprietà. Ad esempio, la larghezza di un’immagine, ImageWidth, viene memorizzata utilizzando il tag 0x0100 ed è un array a una voce. Specificando il tipo 3 (SHORT), il valore di ImageWidth viene memorizzato come valore a 16 bit:

Tag	Type	Size	Value
0x0100 (ImageWidth)	0x0003 (SHORT)	0x00000001 (1 entry)	0x0280 (640 pixels)

Specificando il tipo 4 (LONG) la larghezza viene memorizzata come valore a 32 bit:

Tag	Type	Size	Value
0x0100 (ImageWidth)	0x0004 (LONG)	0x00000001 (1 entry)	0x00000280 (640 pixels)

Un singolo file TIFF può contenere più immagini; questo può essere utilizzato per rappresentare documenti multipagina, ad esempio (come un documento scansionato multipagina o un fax ricevuto). Tuttavia, il software che legge i file TIFF è richiesto solo per supportare la prima immagine.

TIFF supporta una varietà di spazi colore, non solo RGB. Questi includono CMYK, YCbCr e altri, rendendo TIFF una buona scelta per archiviare immagini destinate alla stampa, al cinema o ai media televisivi.

A parte Safari, i browser non supportano nativamente le immagini TIFF nei contenuti Web, se non tramite l’utilizzo di librerie speciali o componenti aggiuntivi del browser. Pertanto, i file TIFF non sono ampiamente utilizzati per visualizzare contenuti Web, ma è comune fornire file TIFF scaricabili quando si distribuiscono foto e altre opere d’arte destinate alla modifica di precisione o alla stampa.

Immagine WebP

WebP supporta la compressione lossy tramite codifica predittiva basata sul codec video VP8 e la compressione lossless che utilizza sostituzioni per i dati ripetuti. Le immagini WebP lossy sono in media più piccole del 25-35% rispetto alle immagini JPEG con livelli di compressione visivamente simili. Le immagini WebP lossless sono in genere più piccole del 26% rispetto alle stesse immagini in formato PNG.

WebP supporta anche l’animazione: in un file WebP lossy, i dati dell’immagine sono rappresentati da un flusso di bit VP8, che può contenere più frame. WebP lossless contiene il frammento ANIM, che descrive l’animazione, e il frammento ANMF, che rappresenta un frame di una sequenza di animazione. È supportato il looping.

WebP ha ora un ampio supporto nelle ultime versioni dei principali browser Web, sebbene non abbia un profondo supporto storico. Fornisci un fallback in formato JPEG o PNG, ad esempio con l’elemento <picture>.

XBM (file X Window System Bitmap)

I file XBM (X Bitmap) sono stati i primi a essere supportati sul Web, ma non sono più utilizzati e andrebbero evitati, poiché il loro formato presenta potenziali problemi di sicurezza. I browser moderni non supportano i file XBM da molti anni, ma quando si ha a che fare con contenuti più vecchi, è possibile trovarne ancora alcuni in giro.

XBM utilizza un frammento di codice C per rappresentare il contenuto dell’immagine come un array di byte. Ogni immagine è composta da 2 a 4 direttive #define, che forniscono la larghezza e l’altezza della bitmap (e facoltativamente l’hotspot, se l’immagine è progettata come cursore), seguite da un array di unsigned char, dove ogni valore contiene 8 pixel monocromatici da 1 bit.

L’immagine deve essere un multiplo di 8 pixel di larghezza.

Scegliere un formato immagine

Scegliere il formato immagine migliore per le tue esigenze è probabilmente più facile rispetto ai formati video, poiché ci sono meno opzioni con un ampio supporto e ciascuna tende ad avere un set specifico di casi d’uso.

Fotografie
Le fotografie in genere vanno bene con la compressione lossy (a seconda della configurazione del codificatore). Ciò rende JPEG e WebP delle buone scelte per le fotografie, con JPEG più compatibile ma WebP che forse offre una compressione migliore. Per massimizzare la qualità e ridurre al minimo i tempi di download, prendi in considerazione di fornire entrambi utilizzando un fallback con WebP come prima scelta e JPEG come seconda. Altrimenti, JPEG è la scelta sicura per la compatibilità.

Icone

Per immagini più piccole come le icone, usa un formato lossless per evitare la perdita di dettagli in un’immagine con limiti di dimensione. Mentre il WebP lossless è ideale per questo scopo, il supporto non è ancora molto diffuso, quindi PNG è una scelta migliore a meno che tu non offra un fallback. Se la tua immagine contiene meno di 256 colori, GIF è un’opzione, anche se PNG spesso comprime anche più piccolo con la sua opzione di compressione indicizzata (PNG-8).

Se l’icona può essere rappresentata usando la grafica vettoriale, prendi in considerazione SVG, poiché si adatta a varie risoluzioni e dimensioni, quindi è perfetto per il design reattivo. Sebbene il supporto SVG sia buono, potrebbe valere la pena offrire un fallback PNG per i browser più vecchi.

Screenshot

A meno che tu non voglia scendere a compromessi sulla qualità, dovresti usare un formato lossless per gli screenshot. Ciò è particolarmente importante se c’è del testo nello screenshot, poiché il testo diventa facilmente sfocato e poco chiaro con la compressione lossy.

PNG è probabilmente la scelta migliore, ma si può sostenere che WebP lossless sarà compresso meglio.

Diagrammi, disegni e grafici

Per qualsiasi immagine che può essere rappresentata tramite grafica vettoriale, SVG è la scelta migliore. Altrimenti, dovresti usare un formato lossless come PNG. Se scegli un formato lossy, come JPEG o WebP lossy, valuta attentamente il livello di compressione per evitare che il testo o altre forme diventino sfocati o poco chiari.

Fornire fallback di immagini

Mentre l’elemento HTML standard <img> non supporta fallback di compatibilità per le immagini, l’elemento <picture> sì. <picture> viene utilizzato come wrapper per una serie di elementi <source>, ognuno dei quali specifica una versione dell’immagine in un formato diverso o in diverse condizioni multimediali, nonché un elemento <img> che definisce dove visualizzare l’immagine e il fallback alla versione predefinita o “più compatibile”.