Convertitore WebP: da PNG e JPG a WebP

Che cos'è il formato WebP

WebP è un formato di immagine sviluppato da Google e pubblicato nel 2010, pensato apposta per il web: l'obiettivo è ottenere immagini più leggere a parità di qualità visiva, così che le pagine si carichino più in fretta. Un solo formato copre i casi d'uso che finora richiedevano JPG, PNG e GIF: fotografie con compressione con perdita, grafiche con compressione senza perdita, trasparenza (canale alfa) e perfino animazioni.

Secondo i test pubblicati da Google, un'immagine WebP con perdita è in media dal 25% al 34% più piccola di un JPG di qualità equivalente (misurata con l'indice SSIM), mentre un WebP senza perdita pesa circa il 26% in meno dello stesso PNG. Su immagini non ottimizzate, come le foto scattate col telefono o i PNG esportati dai programmi di grafica, il risparmio reale arriva spesso al 60–80%.

Perché convertire le immagini in WebP: i vantaggi

1. Pagine più veloci e Core Web Vitals migliori

Le immagini sono in media la parte più pesante di una pagina web. Nella maggior parte dei siti l'elemento più grande visibile all'apertura — quello che determina il Largest Contentful Paint (LCP), una delle tre metriche dei Core Web Vitals — è proprio un'immagine: la foto della hero, la copertina di un articolo, la foto di un prodotto. Meno byte da scaricare significa un LCP più basso, soprattutto sulle connessioni mobili.

2. Un vantaggio diretto per la SEO

Google usa l'esperienza della pagina, Core Web Vitals compresi, tra i segnali di posizionamento, e PageSpeed Insights segnala esplicitamente "Pubblica le immagini in formati più recenti" quando trova JPG e PNG che potrebbero essere WebP o AVIF. Un sito più leggero viene anche scansionato in modo più efficiente da Googlebot, e le immagini WebP sono indicizzate normalmente da Google Immagini.

3. Meno traffico, meno spazio, meno costi

File più piccoli occupano meno spazio sull'hosting e nei backup, consumano meno banda (utile se paghi il traffico o usi una CDN) e meno giga a chi naviga da smartphone. Anche il consumo energetico di trasferimento ed elaborazione si riduce: un piccolo passo verso un sito più sostenibile.

4. Trasparenza senza il peso del PNG

Fino a WebP, per avere uno sfondo trasparente bisognava usare il PNG, che è senza perdita e quindi pesante sulle foto scontornate. WebP permette di combinare colori compressi con perdita e canale alfa compresso senza perdita: la foto di un prodotto su sfondo trasparente può passare da 1,5 MB a meno di 150 KB.

Come funziona la compressione WebP (spiegazione tecnica)

WebP non è un unico algoritmo ma un contenitore (basato su RIFF) che può ospitare due codifiche diverse.

WebP con perdita (lossy): la tecnologia del video VP8

La modalità con perdita deriva dalla codifica dei fotogrammi chiave del codec video VP8. I passaggi principali:

1. Conversione in YUV 4:2:0: l'immagine viene separata in luminosità (Y) e colore (U e V); i canali di colore sono registrati a metà risoluzione, perché l'occhio è molto più sensibile alla luminosità che al colore.
2. Macroblocchi e predizione: l'immagine è divisa in macroblocchi di 16×16 pixel. Per ogni blocco il codificatore predice il contenuto a partire dai pixel già decodificati sopra e a sinistra (predizione intra, con diverse modalità: verticale, orizzontale, DC, TrueMotion…) e salva solo la differenza (il residuo) tra predizione e realtà. È il passo che il JPG non fa, e il motivo principale per cui WebP comprime meglio.
3. Trasformata: il residuo viene trasformato con una DCT su blocchi di 4×4 pixel (il JPG usa blocchi 8×8 senza predizione), che concentra l'informazione in pochi coefficienti.
4. Quantizzazione: i coefficienti vengono arrotondati in base al parametro di qualità. È qui che si perde informazione — e si guadagna peso. WebP può usare quantizzazioni diverse per zone diverse dell'immagine (segmentazione, fino a 4 segmenti), comprimendo di più le aree uniformi e di meno quelle ricche di dettagli.
5. Codifica entropica aritmetica: i dati risultanti sono compressi con un codificatore aritmetico booleano adattivo, più efficiente della codifica di Huffman usata dal JPG.
6. Filtro di deblocking: in decodifica un filtro attenua i bordi tra i blocchi, riducendo l'effetto "quadrettato" tipico dei JPG molto compressi.

WebP senza perdita (lossless): VP8L

La modalità senza perdita (VP8L) è un algoritmo diverso, progettato da zero, che restituisce esattamente gli stessi pixel dell'originale. Prima della compressione applica all'immagine una serie di trasformazioni reversibili:

• predictor transform: ogni pixel è previsto dai vicini (con 14 modalità di predizione scelte per zona) e si salva solo lo scarto;
• color transform e subtract green: sfruttano la correlazione tra i canali rosso, verde e blu, sottraendo il verde dagli altri due;
• color indexing: se l'immagine ha meno di 256 colori viene trasformata in una tavolozza, come una GIF o un PNG-8.

Il risultato è poi compresso con una variante di LZ77 con codici di Huffman e una color cache dei colori usati di recente. Il PNG, al confronto, usa un solo filtro per riga e la compressione DEFLATE generica: per questo il WebP lossless è sensibilmente più compatto.

Trasparenza e animazione

Il canale alfa viene compresso a parte, senza perdita, anche quando i colori sono compressi con perdita. WebP supporta anche le animazioni: una GIF animata convertita in WebP è in genere dal 19% (lossless) al 64% (lossy) più leggera.

WebP, JPG e PNG a confronto

Come usare le immagini WebP sul tuo sito

Oggi WebP è supportato da tutti i browser moderni — Chrome, Edge, Firefox, Opera e Safari da iOS 14 / macOS Big Sur — cioè da oltre il 97% degli utenti. Nella maggior parte dei casi basta usare il file WebP in un normale tag <img>. Se vuoi una riserva per i browser più vecchi, usa il tag <picture>:

<picture>
  <source srcset="foto-prodotto.webp" type="image/webp">
  <img src="foto-prodotto.jpg" alt="Descrizione della foto"
       width="1200" height="800" loading="lazy" decoding="async">
</picture>

Qualche buona pratica per ottenere il massimo:

• ridimensiona prima di convertire: una foto da 4000 px mostrata a 1200 px resta pesante anche in WebP;
• indica sempre width e height per evitare spostamenti del layout (metrica CLS);
• usa loading="lazy" per le immagini sotto la piega, ma non per l'immagine principale in alto, che deve caricarsi subito;
• scegli una qualità 75–85 per le foto e la modalità lossless per loghi, icone e screenshot con testo;
• conserva sempre l'originale: ogni nuova compressione con perdita sottrae un po' di qualità;
• su WordPress (dalla versione 5.8) puoi caricare direttamente i file WebP nella libreria media.

Quando non convertire in WebP

• Stampa: tipografie e software di impaginazione lavorano con PDF, TIFF o JPG ad alta risoluzione.
• Loghi e icone: se esistono in vettoriale, sul web l'SVG è più nitido e spesso più leggero di qualunque immagine.
• File di lavoro: le immagini da ritoccare più volte vanno tenute nel formato originale o in un formato senza perdita.