Come funziona la compressione di immagine: JPEG, PNG, WebP e AVIF spiegati

La risposta pratica

La compressione delle immagini non è una gara in cui un formato vince ogni volta. È un insieme di compromessi: quali dettagli puoi scartare, quali dettagli devono restare esatti, quanto tempo CPU puoi spendere e dove deve funzionare il file dopo l’esportazione.

Usa questo come punto di partenza pratico:

• Usa JPEG per foto che richiedono massima compatibilità, soprattutto in email, download, app vecchie, portali di stampa e moduli di upload rigidi.
• Usa PNG per screenshot, catture di interfaccia, diagrammi, logo e grafiche trasparenti quando i pixel devono restare esatti.
• Usa WebP come formato web moderno di tutti i giorni quando vuoi file più piccoli di JPEG o PNG con ampio supporto browser.
• Usa AVIF per immagini fotografiche grandi e a forte traffico quando il tuo sito può servire fallback WebP o JPEG e tollerare una codifica più lenta.

Sembra semplice, ma i dettagli contano. Una foto di prodotto, una foto per il passaporto, uno screenshot di un software e una filigrana trasparente sono tutte «immagini». Non si comprimono allo stesso modo.

Scegli in base allo scopo, non all’estensione

Prima di entrare nei codec, decidi cosa deve fare l’immagine:

È anche il motivo per cui i consigli sui formati possono sembrare contraddittori. «Usa AVIF perché è più piccolo» può essere un buon consiglio per un’hero image in un build di sito statico. Lo stesso consiglio può essere sbagliato per un’immagine caricata da un cliente che deve essere accettata da un modulo pubblico, un client email o un vecchio CMS.

Le due famiglie di compressione

Ogni formato immagine in questa guida usa compressione senza perdita, compressione con perdita o entrambe.

La compressione senza perdita rimuove la ridondanza matematica e ricostruisce esattamente gli stessi pixel in decodifica. Se uno screenshot ha uno sfondo bianco, colori di interfaccia ripetuti e bordi dritti ripetuti, un formato senza perdita può descrivere quei pattern in modo compatto. PNG è il classico formato web senza perdita. Anche WebP ha una modalità senza perdita.

La compressione con perdita scarta permanentemente informazioni di immagine per ridurre il file. Il trucco è scartare le informazioni che le persone hanno meno probabilità di notare alla dimensione finale di visualizzazione. JPEG è con perdita. WebP e AVIF possono essere con o senza perdita, anche se gran parte della consegna web usa le loro modalità con perdita per le foto.

L’errore da evitare è trattare «con perdita» come automaticamente cattivo e «senza perdita» come automaticamente professionale. Per una foto di blog a 1600 px, un WebP con perdita ben compresso può apparire immutato nella pagina e risparmiare molta banda. Per uno screenshot di software con piccolo testo di menu, un’esportazione con perdita può apparire sfocata anche se il peso sembra ottimo.

I quattro formati a colpo d’occhio

Lo schema non è «il più nuovo vince sempre». I formati più nuovi possono fare più analisi e impacchettare i dati in modo più efficiente, ma può costare tempo di codifica, tempo di QA e complessità di fallback.

Perché lo stesso numero di qualità non è la stessa qualità

Un JPEG salvato a qualità 80 e un WebP salvato a qualità 80 non usano la stessa scala. Il numero è passato al modello proprio di ogni encoder. Agisce su decisioni interne diverse e può essere mappato in modo diverso da strumenti diversi.

Per questo la compressione pratica richiede due controlli:

1. Guarda l’immagine alla dimensione in cui apparirà. Una miniatura di scheda prodotto va giudicata come miniatura di scheda prodotto, non al 400 % di zoom.
2. Confronta i byte quando l’immagine ha le dimensioni giuste. Ridimensionare un originale da fotocamera di 5000 px a un’immagine web di 1600 px di solito fa risparmiare più che spingere troppo in basso il cursore della qualità.

Se converti una cartella in batch, testa qualche caso difficile prima di esportare tutto: un volto, un cielo, un’ombra scura, uno screenshot pieno di testo, un bordo trasparente e una foto d’interno rumorosa.

JPEG: perché le foto diventano piccole e perché il testo diventa brutto

JPEG è il vecchio cavallo di battaglia per le immagini fotografiche perché è costruito attorno al comportamento delle foto. La Library of Congress nota che la famiglia JPEG è comunemente usata per immagini a tono continuo, a colori pieni e in scala di grigi, e il processo classico usa una trasformazione a blocchi 8×8. In parole semplici: JPEG spezza l’immagine in piccoli blocchi, trasforma ogni blocco in informazioni di frequenza e poi quantizza i dettagli che l’osservatore ha meno probabilità di notare.

Funziona bene per:

• volti, abiti, edifici, paesaggi e foto di cibo;
• gradienti naturali come cielo, ombre e toni della pelle;
• immagini che non richiedono pixel trasparenti;
• file che devono aprirsi praticamente ovunque.

Funziona male per:

• piccolo testo negli screenshot;
• icone e logo con bordi netti;
• diagrammi a colori piatti;
• file che saranno modificati e riesportati ripetutamente;
• immagini trasparenti, perché JPEG non ha canale alfa.

Gli artefatti JPEG più riconoscibili sono i bordi di blocco, il ringing attorno al testo, il rumore mosquito su dettagli molto contrastati e il banding nei gradienti morbidi. Non sono casuali. Sono gli effetti collaterali visibili della compressione con perdita a blocchi.

Punti di forza

• Supporto molto ampio in browser, sistemi operativi, app, client email, moduli e fornitori
• Efficiente per foto da fotocamera e altre immagini a tono continuo
• Veloce da codificare e decodificare nei flussi comuni
• Facile da visualizzare, allegare, caricare e condividere

Punti deboli

• Nessun supporto alla trasparenza
• Artefatti attorno a testo, bordi e grafiche a colori piatti
• Esportazioni con perdita ripetute possono accumulare danni
• Spesso più grande di WebP o AVIF a qualità visibile simile per foto web

Quando usare JPEG

Usa JPEG quando la compatibilità conta più degli ultimi kilobyte: upload di foto per passaporto, portali documentali, allegati email, portali di fornitori, tipografie, vecchi CMS e sorgenti <img> di fallback. Usalo anche quando il file è soprattutto una foto e non serve trasparenza.

PNG: perché gli screenshot restano nitidi e perché le foto diventano enormi

PNG è stato progettato per immagini raster portabili e senza perdita. La specifica PNG del W3C copre PNG statico e PNG animato e il formato supporta colore indicizzato, scala di grigi, truecolor e trasparenza alfa opzionale.

Per il lavoro web quotidiano il punto chiave è semplice: PNG conserva i pixel. Può filtrare le righe dell’immagine per renderle più prevedibili e poi comprimere il risultato con DEFLATE. Se l’immagine ha colori ripetuti e bordi netti, funziona alla grande.

Buoni candidati per PNG:

• screenshot di software con testo piccolo;
• diagrammi di UI e tabelle di confronto esportate come immagini;
• logo quando SVG non è disponibile;
• sovrapposizioni trasparenti, timbri e filigrane;
• grafiche che potrebbero essere rimodificate.

Cattivi candidati per PNG:

• foto da fotocamera;
• grandi hero image di siti web;
• foto prodotto con texture naturale;
• immagini di gallerie in cui il peso conta più dei pixel esatti.

Una foto in PNG è spesso enorme perché PNG sta facendo il suo lavoro. Sta conservando rumore, texture fine, minuscole variazioni del sensore e ogni sottile cambio di colore che un codec fotografico con perdita semplificherebbe.

Punti di forza

• Riproduzione dei pixel senza perdita
• Trasparenza tramite canale alfa
• Testo nitido e bordi netti
• Compressione forte per grafiche piatte e ripetitive
• Formato affidabile per master modificabili e flussi con trasparenza

Punti deboli

• File grandi per le fotografie
• Nessuna modalità con perdita nei flussi PNG normali
• Può essere più pesante di WebP per grafiche web trasparenti dove WebP è accettato

Quando usare PNG

Usa PNG quando i pixel esatti contano: screenshot, documentazione di UI, diagrammi, grafiche semplici e asset trasparenti che richiedono supporto prevedibile. Non usare PNG come default per le foto da fotocamera a meno che non serva volutamente una copia di lavoro senza perdita.

WebP: il default web moderno pratico

WebP è utile perché copre più scopi in un unico formato. La documentazione di Google descrive WebP come formato che supporta compressione con perdita, compressione senza perdita, trasparenza, animazione, metadati e profili colore. Questo lo rende più flessibile di JPEG e spesso più piccolo di PNG per la consegna web.

Il WebP con perdita si basa su una codifica predittiva in stile VP8 anziché sul più vecchio flusso solo DCT di JPEG. Il WebP senza perdita usa un diverso insieme di trasformazioni e codifica entropica. Il risultato pratico importante è che WebP è spesso un buon default per le librerie di immagini di un sito: foto di blog, griglie prodotto, miniature, illustrazioni leggere e molti asset trasparenti.

Ma WebP non è magico e non è il file migliore da inviare ovunque. Un browser può supportare WebP mentre un client email, un modulo di upload, una vecchia app di design, una piattaforma social o un flusso di stampa lo rifiutano. Per questo JPEG e PNG contano ancora come formati di consegna o compatibilità.

Punti di forza

• Spesso più piccolo di JPEG per foto a qualità visibile simile
• Supporta trasparenza alfa
• Supporta modalità con e senza perdita
• Ampio supporto sui browser moderni
• Codifica veloce rispetto ad AVIF

Punti deboli

• Ancora rifiutato da alcuni client email, moduli, app vecchie, plugin CMS e flussi di stampa
• Non è un vero sostituto dei logo SVG né dei file sorgente di design modificabili
• Può essere più grande di AVIF su alcune immagini fotografiche di grandi dimensioni

Quando usare WebP

Usa WebP per la maggior parte della consegna moderna di immagini per siti quando controlli la pagina. È un solido default per immagini di blog, foto di schede prodotto, miniature e molti asset web trasparenti. Tieni JPEG o PNG a disposizione quando l’immagine lascia il tuo sito e finisce nel sistema di qualcun altro.

AVIF: l’opzione ad alta compressione che richiede una pipeline

AVIF memorizza dati immagine codificati con AV1 in un formato immagine basato su HEIF. La specifica AVIF include supporto per immagini SDR e HDR, casi d’uso a gamut ampio, immagini ausiliarie come l’alfa e funzionalità di codifica immagine più avanzate. web.dev fa notare che i guadagni di compressione di AVIF dipendono dal contenuto, dalle impostazioni dell’encoder e dall’obiettivo di qualità.

Per i normali team web la storia pratica è questa: AVIF può essere eccellente per foto grandi, ma è più un formato da pipeline che un formato per condivisione casuale. Può richiedere più tempo per codificarsi, il supporto in anteprima negli strumenti più vecchi può essere in ritardo e la gestione dei fallback conta di più.

Buoni candidati per AVIF:

• grandi hero foto;
• landing pieni di foto;
• gallerie editoriali;
• immagini ad alto traffico servite molte volte dopo una singola codifica;
• immagini in cui HDR, profondità di bit elevata o gamut ampio fanno parte del flusso.

Candidati deboli per AVIF:

• moduli di upload rigidi;
• allegati email;
• immagini che i colleghi devono aprire in strumenti più vecchi;
• miniature minuscole in cui i risparmi non giustificano la complessità della pipeline;
• screenshot con piccolo testo, a meno di test accurati.

Punti di forza

• Compressione spesso eccellente per fotografie e immagini complesse
• Trasparenza alfa, HDR e gamut ampio
• Utile come prima sorgente in uno stack <picture> moderno
• Buon adattamento per la generazione immagini in build o via CDN

Punti deboli

• La codifica può essere lenta, soprattutto per grandi lotti
• Il supporto degli strumenti è meno prevedibile che per JPEG, PNG o WebP
• Serve fallback WebP, JPEG o PNG per una consegna produttiva più sicura

Quando usare AVIF

Usa AVIF quando l’immagine è abbastanza grande e abbastanza ripetuta perché byte in meno giustifichino il lavoro di pipeline extra. Un’hero image su una homepage ad alto traffico è un buon candidato. Un’icona da 90 px, un allegato email una tantum o un modulo di upload governativo di solito no.

Perché PNG può battere JPEG sugli screenshot

Una sorpresa comune: uno screenshot PNG può essere più piccolo e più pulito dello stesso screenshot in JPEG.

Succede perché gli screenshot sono spesso pieni di struttura ripetuta. Uno sfondo bianco di documento, una barra strumenti grigia, testo nero dritto, qualche colore di icona e spaziature di UI ripetute sono facili da descrivere per una compressione senza perdita. JPEG non sa che il testo deve restare esatto. Prova a semplificare l’immagine come una foto e il risultato può essere un file non molto più piccolo ma peggiore attorno a lettere e bordi.

Se lo screenshot è per lo più una foto, WebP o JPEG possono vincere. Se è per lo più interfaccia, testo e colore piatto, parti da PNG o WebP senza perdita.

Perché le foto hanno bisogno di compressione con perdita

Le foto da fotocamera sono diverse. Contengono rumore del sensore, texture fine, ombre morbide, gradienti irregolari e milioni di piccoli cambiamenti da pixel a pixel. La compressione senza perdita ha meno ripetizione da sfruttare, quindi spesso non riesce a ridurre il file a sufficienza per la consegna web.

I formati fotografici con perdita funzionano perché uno spettatore di solito si preoccupa del soggetto, della composizione, del colore e della nitidezza percepita, non di ogni pixel originale. Un JPEG, WebP o AVIF ben compresso può rimuovere informazioni difficili da vedere alla dimensione finale.

Il rischio è spingersi troppo oltre. Impostazioni di qualità basse possono appiattire la pelle, sfocare i tessuti, distruggere il dettaglio delle foglie, aggiungere bordi di blocco o creare banding in cieli e ombre. Se queste aree contano per l’immagine, usa una qualità più alta o un file di visualizzazione più grande.

Usa i fallback per la consegna web moderna

Quando controlli un sito, non devi scegliere un solo formato. Il pattern comune in produzione è servire prima il formato moderno più piccolo e tenere fallback più sicuri dietro.

<picture>
  <source srcset="/images/hero.avif" type="image/avif">
  <source srcset="/images/hero.webp" type="image/webp">
  <img
    src="/images/hero.jpg"
    alt="Foto ravvicinata di prodotto in luce naturale"
    width="1200"
    height="800"
  >
</picture>

Il browser usa la prima sorgente che supporta. I browser compatibili AVIF possono prendere il file AVIF. Quelli che non gestiscono AVIF possono provare WebP. I client più vecchi o rigidi hanno comunque il fallback JPEG.

Usa PNG al posto di JPEG come fallback quando l’immagine richiede trasparenza o testo esatto.

Un flusso pratico di compressione

Per una immagine:

1. Parti dalla sorgente di massima qualità che hai.
2. Ridimensiona prima alla dimensione reale di visualizzazione più grande.
3. Scegli il formato in base allo scopo dell’immagine.
4. Esporta una o due impostazioni di qualità.
5. Confronta il risultato sulla pagina reale o sulla destinazione di upload.
6. Conserva il file master, così non dovrai ricomprimere la copia pubblicata.

Per una cartella di sito:

1. Scegli un insieme rappresentativo prima di convertire l’intero lotto.
2. Includi foto, screenshot, grafiche trasparenti, miniature e un’immagine scura difficile.
3. Testa WebP come formato moderno di base.
4. Testa AVIF solo dove il risparmio di byte conterà.
5. Tieni fallback JPEG o PNG per i posti che ne hanno bisogno.
6. Controlla il peso del file dopo il ridimensionamento, non prima.

PhotoTools può aiutare nei passaggi intermedi. Usa Ridimensiona quando la sorgente è troppo grande per la pagina, Comprimi per regolare peso e qualità, e i convertitori di formato quando una destinazione richiede un tipo di file preciso. Conversione e compressione avvengono nel tuo browser, quindi l’immagine non viene caricata su un server durante il flusso dello strumento.

Come convertire tra formati

PhotoTools converte tra JPG, PNG, WebP, AVIF e HEIC direttamente nel tuo browser. Trascina le tue immagini, scegli il formato di destinazione, visualizza in anteprima il risultato e scarica il nuovo file.

Usa il convertitore in base alla destinazione:

• Serve un file che funzioni praticamente in ogni modulo o app? Converti in JPEG.
• Servono trasparenza o pixel esatti di screenshot? Converti in PNG o WebP senza perdita.
• Serve un’immagine web più piccola e il sito la accetta? Converti in WebP.
• Serve la massima compressione per una pipeline web controllata? Testa AVIF con fallback.

Un’ultima regola salva molta qualità di immagine: non fare avanti e indietro tra formati con perdita in continuazione. Se una foto è partita come JPEG di alta qualità, convertire JPEG in WebP per la consegna può andare bene. Convertire quel WebP di nuovo in JPEG, modificarlo e riconvertirlo è dove gli artefatti si accumulano. Torna sempre all’originale quando possibile.