WebP, PNG e JPG: quale formato per le tue immagini?

Come comprime ogni formato

JPG: con perdita, ottimizzato per fotografie

JPG divide l’immagine in blocchi 8×8, converte ciascuno in componenti di frequenza ed elimina i dettagli ad alta frequenza che l’occhio nota meno. Il cursore di qualità controlla quanto aggressivamente li elimina. Funziona molto bene sulle fotografie, dove i dettagli sono fini e irregolari e piccoli errori si nascondono nel rumore.

Funziona male su qualsiasi elemento con bordi netti. Una linea nera sul bianco è pura informazione ad alta frequenza, proprio ciò che il formato elimina, quindi ottieni il tipico alone intorno a testo e contorni. JPG inoltre non ha affatto un canale alfa: non debole, inesistente. Salva un’immagine trasparente come JPG e la trasparenza viene sostituita permanentemente da un colore uniforme, solitamente nero o bianco.

PNG: senza perdita, ottimizzato per grafica piatta

PNG non elimina mai dati dei pixel. Predice ogni pixel dai vicini, memorizza piccole differenze e passa il risultato attraverso DEFLATE. Lunghe sequenze identiche o quasi si comprimono quasi a zero: per questo grafica piatta, schermate dell’interfaccia, disegni lineari e pixel art si riducono così bene.

Il formato ha due modalità da distinguere. PNG a colori reali memorizza colori completi a 24 bit più alfa facoltativo. PNG con tavolozza (PNG-8) memorizza un indice in una tabella di massimo 256 colori, quindi ogni pixel occupa un byte anziché quattro. Per la grafica piatta che usa davvero pochi colori, la modalità con tavolozza è enormemente più piccola e completamente senza perdita. La maggior parte delle persone non la considera mai, ed è il motivo per cui PNG talvolta batte nettamente WebP.

WebP: entrambi, in un unico contenitore

WebP ha due modalità distinte che condividono un’estensione di file. WebP con perdita usa una previsione a blocchi derivata dalla codifica video: tipicamente produce file del 20–30% più piccoli rispetto a JPG a una qualità percepita comparabile. WebP senza perdita usa uno schema diverso con una previsione più sofisticata rispetto a PNG e di solito pesa il 20–30% meno di un PNG a colori reali.

Fondamentalmente, entrambe le modalità supportano alfa. È il vero vantaggio di WebP: prima, un’immagine trasparente doveva essere PNG, quindi senza perdita, quindi grande. WebP con perdita e alfa permette di comprimere una foto scontornata come una normale.

Il confronto a colpo d’occhio

Scegliere in base al contenuto dell’immagine

Fotografie, senza trasparenza

WebP con perdita a qualità 80 è la risposta sensata più piccola, con JPG a qualità 80 come alternativa compatibile. Entrambi vanno bene; WebP è tipicamente più piccolo di un quarto. Un elemento negoziato in base al contenuto <picture> elemento che serve WebP con JPG come alternativa offre entrambi, anche se nel 2026 l’alternativa è soprattutto una precauzione aggiuntiva.

Grafica piatta, loghi, pixel art, schermate dell’interfaccia

PNG, provando la modalità con tavolozza. Qui “WebP per tutto” fallisce più nettamente. Un logo di dodici colori in PNG con tavolozza può pesare pochi kilobyte; lo stesso in WebP con perdita a qualità 80 è spesso più grande, perché la codifica usa bit per descrivere dettagli dei blocchi che una tavolozza codifica gratuitamente e aggiunge artefatti a regioni perfettamente uniformi. WebP senza perdita è competitivo e talvolta vince, ma il margine è abbastanza piccolo da giustificare l’esportazione e il confronto di entrambi.

Sprite e qualsiasi elemento che richieda alfa

PNG. Ogni motore di gioco, editor e flusso di risorse lo legge senza problemi, è senza perdita quindi modifiche ripetute non accumulano danni e gli sprite sono abbastanza piccoli da rendere raramente il peso un vincolo. WebP senza perdita è sensato per distribuire se il motore lo supporta; conserva comunque PNG come copia di lavoro. Mai JPG: senza alfa, lo sprite accuratamente scontornato arriva in un riquadro bianco.

Fotografie con trasparenza

È il terreno ideale del WebP con perdita, che colma un’autentica lacuna di funzionalità. Una foto di prodotto scontornata su sfondo trasparente in PNG può pesare 800 KB; in WebP con perdita e alfa a qualità 80 può scendere sotto i 100 KB senza differenze visibili. PNG è l’unica alternativa, se te ne serve una, e sarà diverse volte più grande.

Due esempi da conoscere

Numeri concreti rendono più facile comprendere i compromessi. Due casi da interventi reali di ottimizzazione:

• Una scheda social PNG di 606KB ricodificata come JPG di 81KB. La scheda aveva sfondo fotografico e testo, esportata PNG perché predefinito in molti strumenti. PNG è inadatto alle foto, quindi era enorme; JPG a qualità 82 è visivamente identico alle dimensioni viste. Riduzione dell’87% con un solo menu.
• Le immagini di sfondo della pagina si sono ridotte di circa il 57% convertendo PNG in WebP. Erano immagini grandi, morbide e ricche di sfumature: contenuti uniformi senza bordi netti né trasparenza, esattamente ciò che la compressione con perdita gestisce meglio. Stesso risultato visivo, meno della metà dei byte.

Entrambi i risultati migliori derivano dall’abbinamento del formato al contenuto anziché da una regola universale. Ripeti lo stesso test su un set di icone a colori uniformi e PNG vincerebbe entrambe le volte.

L’eccezione delle immagini per i social

Un contesto in cui non usare intenzionalmente WebP: immagini Open Graph e schede Twitter. Quegli URL vengono recuperati da crawler e bot di anteprima, come Slack, Discord, iMessage, WhatsApp, LinkedIn, lettori RSS, browser interni e molti strumenti aziendali, non dai browser moderni descritti dalle statistiche di supporto WebP.

Il supporto in quell’insieme è sensibilmente peggiore e fallisce in modo particolare: anziché un errore visibile, il link appare senza immagine e lo scopri settimane dopo. Usare JPG costa forse il 30% di byte in più per un file recuperato dall’infrastruttura, non da utenti con connessioni a consumo.

Una cautela simile vale per email. I programmi email hanno un proprio universo di compatibilità e diversi non supportano ancora WebP. Allegati e immagini per email devono essere JPG o PNG.

Una procedura decisionale

1. Serve trasparenza? Se no, passa al punto 3. Se sì, JPG è escluso del tutto.
2. L’immagine trasparente è fotografica? Contenuto fotografico con alfa → WebP con perdita. Grafica piatta o sprite con alfa → PNG.
3. È una fotografia? Sì → WebP con perdita oppure JPG quando conta la compatibilità. No → continua.
4. Colori uniformi e bordi netti? Esporta PNG con tavolozza e WebP senza perdita, confronta i due file e distribuisci il più piccolo. Non dare nulla per scontato.
5. È una scheda social, un’immagine email o una risorsa per un flusso sconosciuto? Ignora tutto quanto sopra e usa JPG o PNG.

Il passaggio 4 è quello saltato. Esportare due file e confrontare byte richiede quindici secondi ed è più affidabile di qualsiasi regola pratica, perché la risposta dipende davvero dall’immagine specifica.

Il nostro Ritagliatore di fogli di sprite esporta in PNG, JPG o WebP con un controllo di qualità per i formati con perdita, così puoi ritagliare un foglio una sola volta e provare due formati senza lasciare la pagina. Per gli sprite, PNG resta la scelta predefinita sicura: il formato di esportazione conta molto più per le risorse web finali che per i fotogrammi intermedi.

Domande frequenti