WebP contro PNG e JPG: i formati moderni per il web

Nella questione WebP contro PNG e JPG, WebP vince sul tuo sito: può comprimere come un JPG o senza perdita come un PNG, supporta la trasparenza e produce file più leggeri a parità di qualità visiva. Ogni browser attuale lo supporta. PNG e JPG vincono ancora ovunque fuori dal tuo sito: caricamenti su Instagram e LinkedIn, allegati email, file per clienti e tipografie. La regola pratica è semplice. Crea e conserva i master in PNG, servi WebP (o AVIF) ai visitatori.

Cos’è WebP

WebP è un formato di immagine sviluppato da Google e documentato su web.dev. Un solo formato copre ciò per cui prima ne servivano tre: foto con perdita come il JPG, grafiche senza perdita con trasparenza come il PNG e brevi animazioni come la GIF. Il risparmio viene da una compressione più intelligente, che prevede ogni blocco di pixel dai suoi vicini e memorizza solo la differenza.

WebP contro PNG per grafiche e trasparenza

Per loghi, immagini di interfaccia e ritagli, il WebP senza perdita conserva ogni pixel come il PNG ed è di solito più leggero. Il WebP con perdita e trasparenza è il vantaggio maggiore: il ritaglio di un prodotto che richiede un bordo morbido e trasparente può pesare una frazione del PNG senza differenze visibili.

I gradienti sono l’eccezione che richiede attenzione. Una sfumatura scura e morbida può mostrare bande nel WebP con perdita, proprio come nel JPG. Se la tua immagine hero è quasi tutta gradiente, confronta il formato con perdita ad alta qualità con quello senza perdita, e valuta se debba essere un’immagine: un gradiente CSS non costa alcun download.

WebP contro JPG per le foto

Per le fotografie, il WebP con perdita a una qualità intorno a 75-80 di solito eguaglia un JPG a 85 pur essendo più leggero. La differenza si accumula nelle pagine con molte immagini: griglie di prodotti, portfolio, blog. Su una singola foto hero il guadagno c’è ma è meno spettacolare, e ottenere le dimensioni in pixel giuste conta più del formato.

1. 1

   Prima la dimensione

   Esporta la foto alla dimensione massima a cui viene mostrata davvero. Un hero del sito 1920×1080 non ha mai bisogno di un originale da 6000 pixel.

2. 2

   Scegli una qualità

   Parti dal WebP con perdita a 80. Guarda pelle, cieli e angoli scuri con zoom al 100%, poi scendi finché qualcosa cambia e torna indietro di un passo.

3. 3

   Crea versioni più piccole

   Esporta larghezze di 640, 1280 e 1920 pixel, così i telefoni scaricano quella piccola.

4. 4

   Servi con srcset

   Lascia che il browser scelga la larghezza giusta con srcset e sizes, come nel codice qui sotto.

AVIF contro WebP

AVIF è più recente e di solito comprime più di WebP, soprattutto su fotografie e toni morbidi. È supportato in tutti i principali browser attuali. I suoi costi sono una codifica più lenta, che conta se converti le immagini al volo, e meno strumenti che lo aprono. Molti siti servono prima AVIF, poi WebP e per ultimo JPG, e lasciano che il browser prenda il primo che capisce.

<picture>
  <source type="image/avif" srcset="hero-1280.avif 1280w, hero-1920.avif 1920w" sizes="100vw">
  <source type="image/webp" srcset="hero-1280.webp 1280w, hero-1920.webp 1920w" sizes="100vw">
  <img src="hero-1920.jpg" alt="Evening light over the harbour" width="1920" height="1080" fetchpriority="high">
</picture>

Se usi un framework o una CDN di immagini, potrebbe fare tutto questo in automatico da un unico originale caricato. Controlla cosa produce prima di convertire qualcosa a mano.

Dove PNG e JPG vincono ancora

Le piattaforme social convertono da sole i caricamenti, e alcune rifiutano o gestiscono male il WebP. Anche i crawler delle anteprime dei link variano, quindi tieni la tua immagine Open Graph come PNG o JPG 1200×630. E un WebP inviato a un cliente spesso si apre nell’app sbagliata o non si apre affatto.

Come convertire PNG in WebP

Lo strumento gratuito a riga di comando di Google, cwebp, converte un file o un’intera cartella, e la maggior parte degli editor di immagini e degli strumenti di design ora esporta direttamente in WebP.

# lossy, good for photos
cwebp -q 80 photo.png -o photo.webp

# lossless, good for logos and interface graphics
cwebp -lossless logo.png -o logo.webp

# a whole folder
for f in *.png; do cwebp -q 80 "$f" -o "${f%.png}.webp"; done

I tuoi file master possono restare in PNG: Gradiently esporta i design in PNG e JPG, che sono gli input giusti per questo passaggio e i file giusti per ogni caricamento sui social. Per il ragionamento dietro le impostazioni di qualità, leggi comprimere le immagini senza rovinare i gradienti; per la coppia più vecchia, PNG o JPG; e per la checklist completa sulla velocità, ottimizzare le immagini per il web.