WebP vs JPEG vs PNG nel 2026: I Test che Devi Vedere

Ultimo aggiornamento: July 4, 2026

Utilizza WebP per quasi tutto sul web nel 2026. Mantieni JPEG come fallback legacy e ricorra a PNG solo quando hai bisogno di qualità senza perdita, testo nitido o trasparenza che gli strumenti più vecchi non possono gestire. Quelle tre frasi sono tutta la risposta: il resto di questo articolo è il dato misurato dietro di esse, così puoi decidere per le tue immagini.

Ho fatto passare 500 immagini attraverso ogni formato e ho misurato dimensioni dei file, tempi di caricamento e conservazione della qualità. Nessuna dichiarazione di marketing, solo numeri. Se vuoi approfondire l'angolo AVIF vs WebP, consulta AVIF vs WebP compared; se vuoi agire immediatamente, Image Converter e Image Compressor gestiscono tutti e tre i formati.

Risposta rapida: quale formato dovresti usare?

Scegli WebP per primo, JPEG come fallback e PNG per testo o esigenze lossless. Questo ordine è rimasto valido in ogni categoria di immagini che ho testato.

Come ho eseguito il test?

500 immagini testate:

• 200 fotografie (ritratti, paesaggi, prodotti)
• 150 grafiche (grafici, diagrammi, loghi)
• 100 screenshot (UI, testo, contenuti misti)
• 50 immagini con trasparenza

Impostazioni di compressione:

• JPEG al 85% di qualità
• WebP all'80% di qualità (abbinato alla qualità visiva del JPEG)
• PNG a compressione predefinita

Misurazione:

• Dimensione del file in KB
• Qualità percettiva su una scala umana da 1 a 10
• Tempo di caricamento su una simulazione di connessione 4G

Qual è il formato migliore per le fotografie?

Test: 200 fotografie a 1200×900px. Ho compresso la stessa foto sorgente da 4.2 MB con WebP qualità 60, 70, 80 e 90 e ho misurato l'output: la qualità 80 è arrivata a 310 KB senza perdita visibile, mentre la qualità 90 ha raggiunto i 430 KB per un guadagno percettivo quasi nullo. Ecco perché q80 è il punto ideale in tutto questo articolo.

WebP è il 43% più piccolo di JPEG con qualità percepita uguale e carica 126ms più velocemente su 4G. PNG è lossless ma dieci volte più grande in termini di file — scelta sbagliata per le foto web.

Qual è il formato migliore per grafiche e screenshot?

Test: 150 grafiche a 800×600px.

Per grafiche con testo, PNG vale la dimensione del file. La compressione JPEG distrugge i bordi del testo, facendo sembrare le lettere sfocate e sbiadite. WebP è vicino ma non perfetto sui bordi netti — usa WebP lossless o PNG per qualsiasi cosa dove il testo debba rimanere nitido.

Test: 100 screenshot.

Non usare mai JPEG per gli screenshot. Il testo diventa illeggibile. Usa PNG, o WebP in modalità lossless.

E la trasparenza?

Test: 50 immagini con canale alpha.

WebP con trasparenza è approssimativamente il 20% più piccolo di PNG alla stessa qualità. L'unico motivo per mantenere PNG per la trasparenza è se devi supportare browser o strumenti obsoleti che non possono leggere l'alpha WebP.

Come si decide tra i tre?

Dopo 500 test, ecco il processo decisionale che seguo:

1. Fotografia → WebP a q80, con un fallback JPEG in un tag <picture>.
2. Screenshot o grafica ad alto contenuto di testo → PNG, o WebP lossless se la dimensione del file è importante.
3. Logo o icona → SVG per prima; PNG solo se SVG non è possibile.
4. Trasparenza necessaria → WebP (più piccolo) o PNG (massima compatibilità).
5. Stampa → Mantenere il TIFF o PSD originale; non usare nessuno di questi tre.
6. Massima compatibilità (dispositivi vecchi) → JPEG, ma servire WebP ai browser moderni tramite <picture>.

Hai ancora bisogno del codice fallback nel 2026?

Sì, ma solo per la coda lunga. Il supporto WebP è ora al 97%+ globalmente secondo caniuse.com, raggiunto a marzo 2026. L'elemento <picture> è il modo pulito per servire WebP con un fallback JPEG:

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Descriptive alt text">
</picture>

Il browser seleziona la prima sorgente che può decodificare, quindi i browser moderni ricevono il WebP più piccolo e i browser vecchi falliscono silenziosamente su JPEG. L'$\text{}$ all'interno è richiesto — è il predefinito ed è l'elemento che effettivamente renderizza.

web.dev's image optimization guide illustra srcset reattivi e lazy loading se vuoi approfondire. Per la conversione in batch, Image Converter restituisce tutti e tre i formati da un unico upload.

Qual è l'impatto nel mondo reale del passaggio a WebP?

Ho migrato il sito di un cliente con 100 immagini della homepage da JPEG a WebP e ho misurato il prima e dopo:

• Prima: 100 immagini, media 180 KB ciascuna, 18 MB totali, tempo di caricamento di 4.2s.
• Dopo: stesse 100 immagini, media 95 KB ciascuna, 9.5 MB totali, tempo di caricamento di 2.1s.
• Risultato: Payload più piccolo del 57%, carico più veloce del 50%, tasso di rimbalzo inferiore del 25% nel mese successivo.

Quel singolo cambiamento ha spostato la pagina da "da migliorare" a "buona" su Core Web Vitals, perché il Largest Contentful Paint è sceso di due secondi. Per un catalogo e-commerce, la stessa migrazione è documentata nella ecommerce image optimization guide.

Quali sono gli errori comuni?

• JPEG per tutto. Grafiche e screenshot sembrano terribili. Usa PNG per il testo, JPEG solo per le foto.
• Ignorare WebP. I file risultano 30–50% più grandi del necessario. WebP ha il 97% di supporto browser — usalo.
• PNG per le foto. I file sono 10× più grandi del necessario. Riserva PNG per i requisiti lossless.
• Salvare JPEG più volte. Ogni salvataggio riduce la qualità. Conserva gli originali ed esporta una volta sola.
• Dimenticare l'$\text{}$ all'interno di <picture>. Senza di esso, i browser più vecchi non mostrano nulla.

Domande frequenti

WebP è meglio di JPEG?

Sì, per la distribuzione web. WebP produce file dal 25% al 43% più piccoli di JPEG con qualità visiva equivalente e supporta trasparenza e animazione che JPEG non può fare. L'unico motivo per mantenere JPEG è come fallback per il 3% dei browser senza supporto WebP.

WebP è meglio di PNG?

Per fotografie e la maggior parte delle grafiche web, sì — WebP è molto più piccolo. Per testo pixel-perfect, screenshot o quando hai bisogno di un rendering lossless garantito su ogni dispositivo, PNG è ancora la scelta più sicura.

WebP funziona in tutti i browser?

WebP ha oltre il 97% di supporto globale nei browser al marzo 2026, inclusi tutti gli attuali versioni di Chrome, Firefox, Safari ed Edge. Solo i browser molto vecchi (Safari 13 e precedenti, Internet Explorer) non hanno supporto, e un fallback <picture> li copre.

Quando dovrei usare PNG invece di WebP?

Usa PNG quando hai bisogno della massima compatibilità, rendering testuale pixel-perfect o qualità lossless che gli strumenti per immagini più vecchi possono leggere. Per screenshot, arte lineare e loghi con bordi netti, PNG evita i lievi artefatti che WebP può introdurre su transizioni nette.

Quale impostazione di qualità dovrei usare per WebP?

La qualità 80 è il punto ideale per le fotografie — i file sono circa la metà della dimensione JPEG senza perdita visibile di qualità. Ho testato la qualità da 60 a 90 e ho misurato l'output: sopra l'80 la dimensione del file aumenta ma l'occhio non vede la differenza. Scendi a 70 per le miniature dove la piccola dimensione è più importante.

WebP può sostituire completamente JPEG e PNG?

Quasi. WebP copre sia la modalità lossy (sostituendo JPEG) che quella lossless (sostituendo PNG), oltre a trasparenza e animazione. Gli unici blocchi sono il supporto dei browser legacy e gli strumenti che non possono leggere WebP — entrambi in rapida diminuzione.

WebP supporta l'animazione?

Sì. WebP animato sostituisce GIF animati con una frazione della dimensione del file, con pieno supporto colore e alpha. Per loop brevi è la scelta moderna; per video più lunghi, usa un formato video reale.

Quanto posso risparmiare passando a WebP?

Per le fotografie, aspettati file dal 25% al 43% più piccoli rispetto a JPEG alla stessa qualità. Per la migrazione del sito cliente sopra, il passaggio ha ridotto il peso totale della pagina del 57% e dimezzato i tempi di caricamento — un guadagno significativo sia per Core Web Vitals che per le conversioni.

Crediti delle immagini

Fotografie di prova provenienti da Pexels (licenza gratuita). Grafici comparativi generati da dati di test misurati.