I migliori formati di immagine per il web nel 2026

Le immagini restano l’elemento più pesante della maggior parte delle pagine web: di solito occupano più byte di script, font e fogli di stile messi insieme. Scegliere il formato giusto è la decisione di prestazioni a più alto impatto che puoi prendere, e nel 2026 la risposta si è finalmente consolidata. La versione breve: punta prima su AVIF, usa WebP come alternativa e mantieni JPEG come rete di sicurezza universale. PNG ha ancora il suo ruolo, ma più ristretto di quanto la maggior parte delle persone supponga. Ecco come conviene ragionarci.

Lo stack di immagini moderno in breve

Tre formati con perdita dominano ora i contenuti fotografici sul web, in ordine decrescente di efficienza di compressione:

AVIF: derivato dal codec video AV1, di solito produce i file più piccoli a una data qualità visiva, spesso tra il 30 e il 50 % più piccoli di JPEG e sensibilmente inferiori a WebP. Inoltre supporta gamma di colori ampia, HDR, trasparenza e modalità sia con perdita sia senza perdita.
WebP: un formato di Google un po’ più vecchio che resta comunque eccellente: all’incirca tra il 25 e il 35 % più piccolo di JPEG, con supporto per trasparenza e animazione. Il suo vantaggio principale oggi è la velocità di codifica e un supporto dei browser solidissimo.
JPEG: ha quasi 35 anni e un supporto universale. È il tuo fallback, non la tua prima scelta, ma verrà visualizzato letteralmente ovunque.

La buona notizia per il 2026 è che non è più una scommessa. AVIF è supportato nelle versioni attuali di Chrome, Edge, Firefox e Safari, e WebP è supportato da anni su tutti i principali browser. Puoi consultare la matrice di supporto in tempo reale nel riferimento ai tipi di immagine di MDN, che traccia la disponibilità per browser di ciascun formato.

AVIF o WebP: quale dovresti scegliere?

Se puoi servire un solo formato moderno, la decisione di solito si riduce a un compromesso tra dimensione del file e costo di codifica:

Scegli AVIF quando i byte contano più di tutto: grandi immagini hero, portfolio fotografici, qualsiasi cosa in cui ogni kilobyte pesa sulle tue metriche di caricamento. Inoltre gestisce le sfumature morbide e i cieli con molti meno artefatti di banding rispetto a JPEG.
Scegli WebP quando hai bisogno di una codifica rapida ed economica su larga scala, oppure quando vuoi un unico formato moderno con la massima diffusione possibile e un comportamento prevedibile. WebP codifica molto più velocemente di AVIF, il che conta se stai convertendo migliaia di immagini.

In realtà non sei obbligato a scegliere. La risposta giusta per un sito in produzione è offrire entrambi e lasciare che sia il browser a decidere, ed è esattamente a questo che serve l’elemento <picture>. Puoi sperimentare con entrambi proprio ora con il compressore AVIF e il compressore WebP di FileShrinking, confrontare le dimensioni dei file prodotti fianco a fianco e decidere cosa funziona meglio per i tuoi contenuti. Tutto viene eseguito nel tuo browser, quindi non si carica nulla.

Servire il formato giusto con <picture>

Il modo più pulito per distribuire formati moderni con un fallback è la negoziazione del contenuto in HTML. L’elemento <picture> ti consente di elencare le sorgenti candidate in ordine di priorità; il browser usa la prima che comprende e ignora le altre:

Elenca per prima la tua sorgente AVIF, dato che il formato più efficiente dovrebbe prevalere quando è disponibile.
Elenca WebP al secondo posto, per intercettare qualsiasi browser privo di AVIF ma che supporti WebP.
Inserisci un normale JPEG (o PNG) nel tag <img> di chiusura come fallback garantito, e per trasportare il tuo testo alt, il widthe l’height.

Poiché il browser scarica solo l’unica sorgente che sceglie, questo ti offre il formato più piccolo che ciascun visitatore può visualizzare senza alcun JavaScript né rilevamento lato server. Per il pattern di markup completo, la guida di web.dev alle immagini responsive spiega come combinare <picture> con srcset anche per il cambio di risoluzione.

Quando contano ancora PNG (e SVG)

I formati moderni con perdita sono pensati per le fotografie. Sono lo strumento sbagliato per la grafica piatta, e PNG si guadagna ancora il suo posto in alcuni casi specifici:

Grafica dai bordi netti con pochi colori: loghi, icone, screenshot di interfacce e diagrammi. Il PNG senza perdita mantiene testo e bordi nitidi, dove la compressione con perdita li sfocherebbe.
Screenshot con precisione al pixel che vuoi riprodurre esattamente, byte per byte.
File master di origine che modificherai di nuovo in seguito, dato che PNG è senza perdita e non accumula perdita di generazione.

Detto questo, per molti di questi compiti SVGè ancora meglio: loghi e icone semplici disegnati come vettori restano nitidissimi a qualsiasi dimensione e spesso pesano meno di un equivalente rasterizzato. E quando hai davvero bisogno di una grafica rasterizzata con trasparenza sul web, sia AVIF sia WebP supportano anch’essi un canale alfa, quindi un WebP senza perdita può spesso battere PNG in dimensione. Se hai una risorsa nel formato sbagliato, il convertitore di immagini può cambiarla senza ricaricare nulla.

Il peso delle immagini e i Core Web Vitals

La scelta del formato non riguarda solo le bollette della banda: incide direttamente sui Core Web Vitals di Google, che influenzano sia l’esperienza utente sia il posizionamento nei motori di ricerca. La metrica più legata alle immagini è il Largest Contentful Paint (LCP): in una pagina tipica, l’elemento più grande è l’immagine hero, quindi la rapidità con cui arriva quell’immagine determina in gran parte il tuo punteggio LCP. L’obiettivo consigliato è un LCP inferiore a 2,5 secondi per la maggior parte delle tue visite.

Alcune leve pratiche, in ordine approssimativo di impatto:

Riduci i byteservendo AVIF o WebP invece di JPEG. Un’immagine LCP più piccola arriva prima: è il singolo miglioramento più grande.
Dimensiona le immagini in base alle dimensioni di visualizzazione. Inviare una foto da 4000 px in uno spazio da 800 px spreca la maggior parte del download. Usa srcset per servire varianti di dimensione adeguata.
Imposta sempre width e height (oppure usa aspect-ratio in CSS) in modo che il browser riservi lo spazio ed eviti lo spostamento del layout, il che protegge il tuo punteggio CLS.
Evita il caricamento differito dell’immagine LCP. Differisci il caricamento delle immagini sotto la piega, ma lascia che l’immagine hero carichi subito così da non ritardarla.

La conclusione per il 2026

Per i contenuti fotografici, usa per impostazione predefinita AVIF per ottenere i file più piccoli, offri WebP come alternativa rapida e ampiamente compatibile, e conserva un fallback in JPEG dentro un elemento <picture> così che ogni browser riceva qualcosa. Riserva PNG per grafica nitida, screenshot e master senza perdita, e usa SVG per loghi e icone ogni volta che puoi. Comprimi prima di pubblicare, dimensiona ogni immagine in base al suo spazio e i tuoi Core Web Vitals ti ricompenseranno.

Vuoi metterlo in pratica? Converti e comprimi le tue immagini direttamente nel tuo browser con gli strumenti AVIF e WebP, oppure cambia formato con il convertitore di immagini: nessun upload, nessun account e i tuoi file non lasciano mai il tuo dispositivo.