WebP produce file Dal 25 al 35% più piccolo del PNG per la stessa immagine e mantiene lo sfondo trasparente per cui PNG è famoso. Questo singolo fatto spiega perché Google ha creato WebP e perché la maggior parte dei siti Web moderni ora lo serve. La controargomentazione di PNG è raggiungibile: si apre in ogni programma mai scritto, compresi i software che non hanno mai sentito parlare di WebP. Quindi la scelta non riguarda quale formato sia tecnicamente superiore, perché WebP lo è chiaramente. La questione è se stai ottimizzando per un sito web moderno o per garantire la compatibilità ovunque. Questa guida mette a confronto i due in modo approfondito in termini di compressione, trasparenza, modalità di qualità, supporto del browser, animazione e velocità della pagina, quindi fornisce una regola chiara per la scelta.

Cos'è WebP e perché Google lo ha creato

WebP è un formato immagine rilasciato da Google nel 2010, basato sulla tecnologia di compressione del suo codec video VP8. L'obiettivo era schietto: rendere le immagini web più piccole in modo che le pagine si caricassero più velocemente. Google aveva i dati per sapere che le immagini dominano il peso della pagina e che tagliare un terzo di ogni immagine avrebbe accelerato notevolmente il web. WebP è stato progettato fin dall'inizio per sostituire tre formati contemporaneamente, corrispondenti Trasparenza di PNG, compressione fotografica di JPG e animazione di GIF in un unico contenitore. Questa ambizione è il motivo per cui può fare cose che PNG non può fare.

Cos'è PNG e perché resiste

PNG è arrivato nel 1996 come sostituto senza brevetto del GIF, utilizzando la compressione DEFLATE senza perdita e aggiungendo un canale alfa completo. È diventato lo standard per loghi, icone, screenshot e qualsiasi elemento grafico che necessiti di uno sfondo trasparente. Quasi tre decenni di sostegno universale sono il suo fossato. Ogni browser, sistema operativo, client di posta elettronica, suite per ufficio ed editor di immagini legge PNG senza configurazione. Quando un'immagine deve assolutamente aprirsi in un posto sconosciuto, PNG è il formato che non fallisce mai.

Dimensione del file: WebP vince chiaramente

WebP si comprime meglio di PNG essenzialmente in ogni scenario. Per un tipico logo o grafica dell'interfaccia utente con trasparenza, aspettati a Riduzione dal 25 al 35%. passando da PNG a WebP senza perdita di dati. Passando alla modalità con perdita di WebP, il risparmio cresce notevolmente, spesso dal 60 al 70%, pur mantenendo il canale alfa. PNG non ha alcuna opzione con perdite, quindi non può competere nella fascia bassa. In un sito con dozzine di risorse di immagini, tale differenza si traduce in centinaia di kilobyte per caricamento di pagina.

Il divario deriva da una compressione più intelligente. L'algoritmo DEFLATE di PNG è un metodo generico preso in prestito da ZIP, efficace nel trovare ripetizioni letterali. WebP utilizza una codifica predittiva creata appositamente per le immagini, indovinando ogni blocco dai suoi vicini e memorizzando solo la differenza. Questo approccio attento all’immagine trova risparmi che DEFLATE non può vedere, motivo per cui un formato del 2010 batte uno del 1996 in modo così coerente.

Trasparenza: ce l’hanno entrambi, WebP fa di più

A differenza di JPG, entrambi i formati hanno un canale alfa completo, quindi il logo rimane trasparente in entrambi. Ma WebP aggiunge qualcosa che PNG non può eguagliare: trasparenza in modalità lossy. La trasparenza di PNG viene fornita solo con compressione senza perdita di dati, quindi un'immagine semitrasparente deve essere archiviata con il massimo peso senza perdita di dati. WebP ti consente di avere uno sfondo trasparente e una compressione aggressiva allo stesso tempo, che è esattamente ciò di cui ha bisogno un logo PNG pesante. Per le risorse dell'interfaccia utente e i ritagli di prodotto che devono rimanere trasparenti pur pesando meno, questa combinazione è l'argomento più forte di WebP.

Qualità: modalità lossless e lossy

WebP offre entrambe le modalità, il che lo rende flessibile in un modo in cui PNG non lo è:

WebP senza perdite corrisponde esattamente a PNG, pixel per pixel, producendo un file più piccolo. Non esiste alcun compromesso sulla qualità, solo una vittoria in termini di dimensioni.
WebP con perdita elimina i dettagli come fa JPG, riducendo ulteriormente i file e, a differenza di JPG, può comunque mantenere la trasparenza.

PNG offre solo file lossless, motivo per cui rimane di grandi dimensioni. Se hai bisogno di una copia perfetta, WebP senza perdita di dati te la dà più piccola. Se puoi accettare una perdita invisibile, WebP con perdita ti dà una frazione della dimensione. In ogni caso esiste un'impostazione WebP che batte PNG.

Supporto per browser e software

Questo è l'unico vero vantaggio di PNG e si sta restringendo. Ogni browser moderno supporta WebP, inclusi Chrome, Firefox, Safari ed Edge, quindi sul Web aperto la questione della compatibilità è sostanzialmente risolta. Le lacune risiedono altrove: alcuni software desktop meno recenti, alcuni client di posta elettronica, versioni precedenti di Office e piattaforme legacy rifiutano ancora WebP. I moduli di caricamento sono l'altra trappola, poiché molti accettano solo JPG e PNG e rifiutano completamente un file WebP.

Quindi il riassunto onesto è che WebP è sicuro per il tuo sito web e rischioso per i file che consegni a sistemi sconosciuti. PNG rimane il ripiego universale per qualsiasi cosa lasci il tuo controllo.

Animazione: anche WebP sostituisce GIF

Una funzionalità che manca semplicemente a PNG è l'animazione. Il PNG standard contiene un singolo fotogramma e, sebbene esista l'estensione APNG, il supporto è sempre stato incoerente. Supporta WebP animazione nativa con alfa completo, producendo file molto più piccoli dell'equivalente GIF pur mostrando milioni di colori invece dei 256 del GIF. Se stai scegliendo tra i formati per una breve grafica in loop, WebP batte decisamente sia PNG che GIF.

Perché WebP velocizza i siti web

Il peso della pagina viene alimentato direttamente La più grande vernice contenuta, uno dei Core Web Vitals di Google e un segnale di ranking confermato. Le immagini sono solitamente la cosa più pesante su una pagina, quindi tagliarle ciascuna di un terzo ha un effetto misurabile sul tempo di caricamento, sul punteggio LCP e sulla frequenza di rimbalzo. Anche le pagine più veloci si convertono meglio, motivo per cui il lavoro sulle prestazioni paga due volte.

Il modello pratico utilizzato dalla maggior parte dei siti è progressivo: servire WebP ai browser che lo supportano e ricorrere a PNG o JPG per il resto. L'HTML moderno lo gestisce automaticamente con l'elemento immagine e la maggior parte dei sistemi di gestione dei contenuti e dei servizi di immagini lo fanno per te. Ottieni la vittoria in termini di velocità senza rompere nulla per i clienti più anziani.

Quando utilizzare ciascun formato

Utilizzare WebP per le immagini dei siti Web, in particolare loghi e icone con trasparenza, dove file più piccoli significano pagine più veloci.
Utilizzare WebP quando hai bisogno di trasparenza e dimensioni ridotte, poiché è l'unico formato comune che offre entrambe le cose.
Utilizzare PNG quando l'immagine deve essere aperta in qualsiasi programma, inclusi vecchi software e client di posta elettronica.
Utilizzare PNG per moduli e sistemi di caricamento che elencano esplicitamente i formati accettati e omettono WebP.
Utilizzare PNG come master dell'archivio, poiché il supporto universale conta più delle dimensioni per un file che conservi per sempre.

Come convertire PNG in WebP

La conversione non richiede installazione. Apri il nostro convertitore, aggiungi il tuo PNG e scegli l'opzione che mantiene la trasparenza, che esporta WebP. L'elaborazione viene eseguita localmente tramite l'API HTML5 Canvas, quindi non viene caricato nulla e puoi raggruppare più file contemporaneamente. Lo sfondo trasparente sopravvive intatto mentre il file diventa notevolmente più leggero. La guida completa è nel Guida da PNG a WebP.

E l'AVIF?

Vale la pena conoscerlo per contesto: AVIF è un formato più recente che si comprime ancora meglio di WebP, spesso più piccolo di un altro 20%, e supporta anche trasparenza e animazione. Il supporto del browser ora è buono ma leggermente indietro rispetto a WebP, e il supporto del software è ancora più indietro. Per la maggior parte dei siti oggi, WebP è la scelta pragmatica con il miglior equilibrio tra risparmio e supporto, con AVIF che vale la pena tenere d'occhio man mano che l'adozione cresce. PNG rimane il ripiego per entrambi.

Il verdetto

WebP vince in termini tecnici in modo completo: file più piccoli, trasparenza sia in modalità lossless che lossy, animazione e supporto completo dei browser moderni. PNG vince su una cosa che conta ancora, ovvero l'apertura assolutamente ovunque senza dubbio. Utilizza WebP per il tuo sito Web e PNG per tutto ciò che invii verso l'ignoto e offri WebP con un fallback PNG quando desideri entrambi. Per l'immagine di formato più ampio, il Guida PNG e JPG copertine in cui si inseriscono le fotografie.

Esempi di dimensioni reali

Le percentuali astratte aiutano meno dei numeri reali, quindi ecco come appare il divario su asset tipici:

A Logo da 500 x 500 pixel con trasparenza: circa 45 KB come PNG-24, circa 30 KB come WebP senza perdita e meno di 12 KB come WebP con perdita con il canale alfa intatto.
A grafica dell'eroe a tutta larghezza con ombre morbide: spesso 400 KB o più come PNG, circa 260 KB come WebP senza perdita e ben meno di 100 KB come WebP con perdita.
A Insieme dell'icona dell'interfaccia utente di venti piccoli grafici: l'intero set può scendere da circa 200KB a 130KB senza perdita di dati, prima di qualsiasi ottimizzazione con perdita.

Moltiplicate l'esempio dell'eroe per una dozzina di pagine e il risparmio diventa di pochi secondi di tempo di caricamento su una connessione lenta, che è esattamente il tipo di differenza misurata da Core Web Vitals.

Conversione di una libreria PNG esistente

La maggior parte dei siti non inizia in modo pulito; hanno centinaia di PNG già distribuiti. Tre approcci funzionano, a seconda della configurazione. Se il tuo sito viene eseguito su un framework o CMS moderno, la pipeline delle immagini probabilmente converte e fornisce WebP automaticamente, quindi modifichi un'impostazione anziché i file. Se utilizzi un servizio CDN o di immagini, la maggior parte offre negoziazione automatica del formato, fornendo WebP ai browser che lo accettano e PNG a quelli che non lo accettano, dallo stesso file sorgente. E se gestisci i file manualmente, la conversione in batch delle risorse e l'aggiornamento dei riferimenti funziona, anche se richiede più lavoro.

Qualunque percorso tu prenda, mantieni i PNG originali. Sono i tuoi padroni e potresti averne bisogno per un sistema che rifiuta WebP in seguito.

Errori WebP comuni da evitare

Alcune trappole catturano le persone che si spostano su WebP:

Conversione dei tuoi master d'archivio: convertire le copie per la consegna e conservare gli originali PNG, poiché il supporto WebP è più limitato nel software desktop.
Utilizzo di WebP con perdita su grafica di testo: la compressione con perdita macchia le lettere nitide proprio come fa JPG. Utilizza WebP senza perdite per screenshot e immagini con testo pesante.
Saltare il fallback: servire WebP senza alternative PNG o JPG interrompe l'immagine per i client più vecchi e alcuni contesti di posta elettronica.
Invio di WebP per caricare moduli: molti accettano solo JPG e PNG e rifiutano completamente il file.

Nessuno di questi è un motivo per evitare WebP. Sono ragioni per usarlo dove appartiene, ovvero la distribuzione ai browser moderni, mantenendo PNG per i master e per qualsiasi cosa lasci il tuo controllo.

Come i browser scelgono effettivamente il formato

Servire due formati sembra complicato, ma il meccanismo è semplice e automatico. Ogni browser invia un'intestazione Accept con ogni richiesta di immagine, elencando i formati che comprende. Un server o una CDN legge quell'intestazione e restituisce WebP a un browser che pubblicizza il supporto, o PNG a uno che non lo fa, dallo stesso URL. In HTML puoi fare la stessa cosa esplicitamente con l'elemento immagine, elencando prima una fonte WebP e poi un fallback PNG; il browser sceglie il primo che riesce a leggere e ignora il resto. In ogni caso, nessun visitatore vede mai un'immagine rottae i browser moderni ottengono tranquillamente il file più piccolo mentre quelli più vecchi ottengono quello compatibile.

Domande frequenti

WebP è migliore di PNG?

Tecnicamente sì. I file WebP sono più piccoli del 25-35%., mantieni la trasparenza e aggiungi modalità con perdita di dati e animazione che mancano a PNG. PNG vince solo sulla compatibilità universale.

WebP supporta la trasparenza come PNG?

Sì, e oltre. WebP mantiene un canale alfa sia in modalità lossless che lossy, mentre PNG offre solo trasparenza con compressione senza perdita di dati.

Quanto è più piccolo WebP di PNG?

Tipicamente Dal 25 al 35% più piccolo senza perditee dal 60 al 70% più piccolo in modalità con perdita pur mantenendo la trasparenza.

Tutti i browser supportano WebP?

Ogni browser moderno supporta WebP, inclusi Chrome, Firefox, Safari e Edge. Alcuni software desktop e moduli di caricamento meno recenti lo rifiutano ancora.

Quali formati supportano la trasparenza e l'animazione?

WebP fa entrambe le cose. PNG ha trasparenza ma non ha un'animazione affidabile e GIF si anima ma è limitata a 256 colori con trasparenza grezza.

WebP o PNG sono migliori per un sito Web?

WebP, per la velocità. I file più piccoli migliorano il Paint con contenuto più grande, un segnale di classificazione dei Core Web Vitals. Fornisce un fallback PNG per i client più vecchi.

Dovrei usare WebP o AVIF?

WebP, per ora. AVIF comprime meglio circa il 20% ma ha un supporto più ristretto, quindi WebP rappresenta oggi l'equilibrio pragmatico tra risparmio e compatibilità.

Posso caricare un file WebP in un modulo?

Spesso no. Molti moduli di caricamento accettano solo JPG e PNG, quindi convertili in uno di quelli quando un sistema elenca i formati accettati e omette WebP.

Devo convertire i miei file PNG esistenti in WebP?

Converti le copie per la consegna, non i tuoi master. Conserva i PNG originali, poiché il supporto WebP è più limitato nel software desktop e nei moduli di caricamento.

WebP con perdita è utile per gli screenshot con testo?

No. La compressione con perdita macchia le lettere nitide, esattamente come fa JPG. Utilizza WebP senza perdite per grafica e screenshot con molto testo.

Ho ancora bisogno di un fallback PNG con WebP?

Per la massima sicurezza, sì. I browser moderni leggono tutti WebP, ma i vecchi software desktop, alcuni client di posta elettronica e molti moduli di caricamento continuano a non farlo.

Come fa un browser a sapere se caricare WebP o PNG?

Attraverso il Accetta l'intestazione che invia con ogni richiesta, che elenca i formati supportati. Server e CDN lo leggono e restituiscono automaticamente WebP o il fallback PNG.