Miglior formato di immagine per i siti web nel 2026: JPG, WebP, AVIF o PNG?

Risposta breve: il miglior formato di immagine per i siti web nel 2026

Nel 2026 il miglior formato di immagine per la maggior parte dei siti è il WebP. È il default pratico per foto, immagini prodotto, miniature, immagini da blog e molte grafiche trasparenti perché in genere produce file più piccoli di JPEG o PNG e funziona su tutti i browser moderni.

Non significa però che "convertiamo tutto in WebP" sia un buon piano di migrazione. L’AVIF può battere il WebP per dimensione su asset visivi grandi. Il JPEG resta il fallback più sicuro per browser datati, e-mail, import CMS e moduli di upload di terzi. Il PNG resta la scelta giusta per screenshot, diagrammi e asset bitmap dove contano bordi netti o trasparenza. Per loghi e icone, poi, il SVG batte tutti gli altri quando l’artwork è vettoriale.

La risposta vera per il 2026 è:

Perché questa decisione conta ancora

Il formato di immagine influenza quanti byte scarica un visitatore. Questo tocca velocità di pagina, consumo di dati mobili e Largest Contentful Paint, soprattutto quando l’immagine è sopra la piega. La guida Chrome Lighthouse considera ancora AVIF e WebP come formati moderni con caratteristiche di compressione e qualità migliori dei classici JPEG e PNG per molte immagini web.

Il formato però è solo una parte della SEO delle immagini. Un AVIF codificato benissimo può comunque danneggiare le prestazioni se è largo 4000 px e viene mostrato in uno slot da 700 px. Un WebP minuscolo non aiuta il ranking se manca l’alt utile e la pagina è povera. Prima scegli il formato, poi ridimensiona, comprimi, imposta width e height, scrivi un alt significativo e servi sorgenti responsive.

Il modello mentale utile è semplice: prima i pixel giusti, poi il formato giusto.

Usa il WebP come default quotidiano

Il WebP è il miglior default per la maggior parte del lavoro sulle immagini web nel 2026. Supporta compressione con perdita per le foto, senza perdita per la grafica, trasparenza e animazione. Google dichiara che le immagini WebP lossless sono più leggere del 26 % rispetto ai PNG e le WebP lossy sono del 25–34 % più leggere dei JPEG equivalenti a qualità comparabile.

Usa il WebP per:

• Foto di blog e centri di assistenza.
• Immagini di scheda prodotto e miniature.
• Immagini delle pagine categoria.
• Foto del team e ritratti degli autori.
• Immagini di sfondo che non hanno bisogno del risparmio dell’AVIF.
• Grafiche trasparenti quando il CMS e i browser target gestiscono in modo affidabile il WebP.

Il WebP è anche un’ottima scelta operativa. La maggior parte di editor di immagini, build tool, plugin CMS, CDN e convertitori nel browser sanno crearlo. Se un piccolo team vuole un unico formato moderno e non vuole gestire più fallback per ogni immagine, il WebP è la risposta meno faticosa.

Usa l’AVIF dove il risparmio giustifica la pipeline

L’AVIF è il formato da testare quando il peso delle immagini è un vero problema di business: un grande hero, una landing ad alto traffico, un portfolio con fotografia a piena larghezza o una gallery prodotto in cui su mobile vengono caricate tutte le immagini. MDN descrive l’AVIF come un formato ad alte prestazioni, royalty-free, con supporto per trasparenza, animazione, maggiore profondità di colore, HDR e gamma cromatica ampia. Nella pratica, il suo vantaggio quotidiano più grande sono file più piccoli per molte immagini fotografiche.

Il rovescio della medaglia è il flusso. L’AVIF può essere più lento da codificare e alcuni browser vecchi, webview di app, strumenti CMS o portali di upload lo gestiscono peggio di JPEG o WebP. Per questo l’AVIF di solito è la prima sorgente di una catena di fallback, non l’unico file che tieni.

Usa l’AVIF quando:

• L’immagine è abbastanza grande perché il risparmio di byte conti.
• L’asset è generato in build o attraverso una CDN.
• Puoi valutare la qualità visiva prima di pubblicare.
• Puoi servire un fallback WebP o JPEG.
• I tuoi analytics mostrano un uso di browser moderni.

Non usare l’AVIF alla cieca per ogni miniatura minuscola. Se un WebP da 14 KB diventa un AVIF da 10 KB ma impiega più tempo a generarsi e complica la pipeline, il vantaggio potrebbe non valere la candela.

Tieni il JPEG per compatibilità, fallback e flussi fuori dal web

Il JPEG non è morto. Semplicemente non è più il miglior default quando l’obiettivo è la performance web.

Tieni il JPEG quando la compatibilità pesa più della compressione massima:

• Newsletter e allegati e-mail.
• Import da CMS vecchi o media library con controlli di file rigidi.
• App native o portali di upload che accettano solo JPEG.
• Strumenti social che ricomprimono tutto comunque.
• Browser legacy, browser dentro le app, chioschi, dispositivi embedded.
• L’immagine di fallback dentro un elemento <picture>.

Il JPEG va bene anche quando la pagina non è ricca di immagini e la performance non è un vincolo. Un JPEG ben ridimensionato con una qualità sensata è meglio di un WebP enorme servito con le dimensioni sbagliate. La maggior parte della cattiva performance delle immagini viene dai pixel sovradimensionati, non dal JPEG in sé.

Usa il PNG quando i pixel devono restare esatti

Il PNG non è un formato moderno per servire foto: è un formato di precisione. Usalo quando bordi lossless, testo o trasparenza contano più della dimensione del file.

Buoni casi d’uso del PNG:

• Screenshot di UI con testo piccolo.
• Grafici, diagrammi e line art.
• Loghi quando manca l’SVG.
• Asset bitmap trasparenti nei flussi di design.
• File che verranno modificati più volte.

Cattivi casi d’uso del PNG:

• Foto da fotocamera.
• Sfondi di hero.
• Grandi fotografie prodotto senza trasparenza.
• Immagini decorative che potrebbero essere WebP o AVIF.

Un PNG fotografico può pesare molte volte di più di un JPEG, WebP o AVIF visivamente simile. Se l’immagine è fotografica e non ha bisogno né di trasparenza né di preservare i pixel in modo esatto, il PNG è quasi sempre l’export sbagliato.

Non dimenticare il SVG per loghi e icone

La maggior parte degli articoli "miglior formato" confronta JPG, PNG, WebP e AVIF, ma loghi e icone di un sito spesso funzionano meglio come SVG. L’SVG è vettoriale, resta nitido a qualsiasi dimensione ed è spesso molto più leggero di un logo raster.

Usa l’SVG per:

• Loghi di sito.
• Icone semplici.
• Simboli di interfaccia.
• Illustrazioni piatte naturalmente vettoriali.

Usa PNG o WebP quando l’asset è un raster complesso, quando la piattaforma rimuove gli SVG o quando non ti fidi della fonte dell’SVG. Un SVG può contenere markup simile a codice: usa solo SVG provenienti da flussi di fiducia.

Decisioni di formato per tipo di pagina

Pagine diverse meritano scelte di formato diverse. L’hero di una home e uno screenshot in un articolo di help non vanno trattati allo stesso modo.

Se questa settimana puoi fare un solo cambiamento, parti dalle immagini più grandi sopra la piega e dai template più visitati con molte immagini. Convertire prima ogni piccola icona sembra produttivo ma raramente muove le metriche di performance.

Il pattern di fallback corretto

Per le pagine in produzione, l’elemento <picture> lascia al browser la scelta del primo formato supportato. web.dev raccomanda il pattern AVIF prima, WebP secondo, JPEG come fallback. L’img annidato porta comunque alt, width, height e la src di fallback.

<picture>
  <source
    type="image/avif"
    srcset="/images/hero-1200.avif 1200w, /images/hero-2400.avif 2400w"
    sizes="100vw"
  />
  <source
    type="image/webp"
    srcset="/images/hero-1200.webp 1200w, /images/hero-2400.webp 2400w"
    sizes="100vw"
  />
  <img
    src="/images/hero-1200.jpg"
    width="1200"
    height="800"
    alt="Una cucina appena ristrutturata con ante in noce e luce naturale"
  />
</picture>

Metti il JPEG di fallback nell’elemento img. Metti lì anche un alt significativo. Non nascondere l’unica descrizione utile in un tag source: il browser non usa source per l’alt.

Per un hero LCP, pensa anche alla priorità di caricamento. Non applicare lazy load all’hero principale. Per le immagini sotto la piega, il lazy loading può aiutare.

Impostazioni di qualità davvero utili

I valori di qualità non sono universali. Una qualità WebP 80, una AVIF 50 e una JPEG 85 non significano la stessa cosa. Anche gli encoder si comportano in modi diversi.

Usa questi valori come punto di partenza, non come regole:

Confronta sempre l’immagine esportata alla dimensione in cui apparirà sulla pagina. Se un’immagine viene mostrata a 600 px di larghezza, giudicarla al pieno zoom 4000 px può far sembrare peggiore una compressione che nessun visitatore vedrà. Prova anche gradienti scuri, incarnati, texture di prodotto e testi sovrapposti: lì i problemi di compressione emergono prima che in un cielo blu piatto.

Un piano di migrazione realistico

Se stai rimettendo a posto un sito esistente, non partire convertendo tutta la media library. Parti dove l’impatto è misurabile.

1. Estrai un elenco delle immagini più grandi sulle pagine più visitate.
2. Segna quali sono sopra la piega o candidate a LCP.
3. Ridimensiona ogni immagine alla dimensione massima in cui viene davvero mostrata.
4. Converti prima le foto in WebP.
5. Testa l’AVIF per gli hero o le gallery più pesanti.
6. Mantieni fallback JPEG per i template che devono restare compatibili con browser vecchi, e-mail o CMS.
7. Lascia screenshot, diagrammi e grafiche precise come PNG o WebP lossless.
8. Aggiungi width, height, srcset, sizes e un alt descrittivo.
9. Rilancia Lighthouse o il tuo monitor di performance prima e dopo.

Questo flusso è meno affascinante di dire "l’AVIF è il migliore", ma è quello che di solito funziona su un sito reale.

Come convertire i formati con PhotoTools

PhotoTools converte file JPG, PNG, WebP, AVIF e HEIC direttamente nel browser. Trascina l’immagine, scegli il formato di destinazione, regola la qualità per le uscite lossy, converti, scarica il risultato. La conversione in batch è utile quando stai migrando una cartella di immagini prodotto o foto da blog.

Prima di convertire un lotto grande, fai un test semplice:

• Scegli una foto luminosa, una scura, una con un viso e una con dettaglio fine.
• Esporta versioni WebP e AVIF.
• Confrontale alla dimensione di visualizzazione reale.
• Controlla il risparmio in dimensione di file.
• Carica un file sul CMS per verificare che la piattaforma lo accetti.

Per i file HEIC da iPhone, convertili in JPEG o WebP prima di pubblicare. Il HEIC è utile come formato di cattura e archiviazione, ma non è un formato sicuro da servire come contenuto pubblico sul web.

Note sulle fonti della raccomandazione 2026

Questa raccomandazione si basa sulla documentazione attuale di browser e performance e sui reali flussi di pubblicazione web:

• Guida MDN ai tipi di file immagine descrive AVIF, WebP, JPEG, PNG, SVG, il supporto dei browser e quando conviene un fallback.
• Documentazione Chrome Lighthouse spiega perché AVIF e WebP possono ridurre il peso delle immagini rispetto a JPEG e PNG classici.
• Documentazione WebP di Google riporta i risparmi del WebP lossless e lossy rispetto a PNG e JPEG.
• web.dev sulla performance delle immagini spiega come i formati moderni e l’elemento <picture> si inseriscono nel caricamento delle immagini e nel LCP.

In breve: usa il WebP come formato web quotidiano, aggiungi l’AVIF dove il peso delle immagini ha davvero impatto sulla performance, tieni il JPEG per la compatibilità e conserva PNG o SVG per gli asset che ne hanno reale bisogno.