# WebP contro PNG e JPG: i formati moderni per il web [Canonical HTML page](https://gradiently.design/it/guide/webp-images) Il tuo sito non deve servire gli stessi file che pubblichi su Instagram. WebP e AVIF fanno lo stesso lavoro di PNG e JPG con meno byte, se li imposti bene. ## The short version - WebP è un formato di immagine che può essere con perdita come il JPG o senza perdita come il PNG, e supporta trasparenza e animazione. - A qualità visiva simile, i file WebP sono di solito sensibilmente più leggeri degli equivalenti JPG e PNG. - Ogni versione attuale di Chrome, Safari, Firefox ed Edge supporta WebP, quindi un fallback serve solo per browser molto vecchi. - AVIF comprime più di WebP ed è ormai ampiamente supportato, ma si codifica più lentamente. - Tieni PNG e JPG per i caricamenti sulle piattaforme social e per i file che invii alle persone; usa WebP o AVIF sul tuo sito. 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](https://web.dev/articles/serve-images-webp). 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. | Caratteristica | JPG | PNG | WebP | AVIF | | --- | --- | --- | --- | --- | | Con perdita | Sì | No | Sì | Sì | | Senza perdita | No | Sì | Sì | Sì | | Trasparenza | No | Sì | Sì | Sì | | Animazione | No | Limitata (APNG) | Sì | Sì | | Supporto dei browser | Universale | Universale | Tutti i browser attuali | Tutti i browser attuali | | Accettato dalle piattaforme social | Sì | Sì | In modo incostante | Raramente | Controlla il supporto attuale su [caniuse.com](https://caniuse.com/webp) se il tuo pubblico usa dispositivi vecchi. ## 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](https://gradiently.design/it/guide/css-linear-gradient) non costa alcun download. - Blu notte: prova senza perdita: `linear-gradient(160deg, #0c1222 0%, #13294b 50%, #1e3a8a 100%)` - Rosa pallido: perdita, alta qualità: `radial-gradient(circle at 70% 30%, #f9a8d4 0%, #fbcfe8 35%, #fdf2f8 80%)` - Tre colori vivaci: la perdita va bene: `linear-gradient(135deg, #f97316 0%, #ec4899 50%, #8b5cf6 100%)` Le sfumature scure e sottili mostrano per prime la compressione; quelle vivaci e ricche di dettagli la nascondono. Scegli le impostazioni WebP in base al contenuto, non per abitudine. ## 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. **Prima la dimensione** Esporta la foto alla dimensione massima a cui viene mostrata davvero. Un [hero del sito](https://gradiently.design/it/guide/website-hero-background) 1920×1080 non ha mai bisogno di un originale da 6000 pixel. 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. **Crea versioni più piccole** Esporta larghezze di 640, 1280 e 1920 pixel, così i telefoni scaricano quella piccola. 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. ```html Evening light over the harbour ``` Il browser usa il primo `source` che supporta e ripiega su `img`. Larghezza e altezza evitano che il layout salti durante il caricamento. 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. > **WebP animato e GIF** Il WebP animato è molto più leggero della GIF e mantiene tutti i colori, quindi si adatta a piccole grafiche in loop su una pagina. Per qualsiasi cosa più lunga di pochi secondi, un video MP4 o WebM senza audio è ancora più leggero. [GIF o MP4](https://gradiently.design/it/guide/gif-vs-mp4) li confronta nel dettaglio. ## Dove PNG e JPG vincono ancora ### Usa WebP o AVIF - Immagini sul tuo sito - Griglie di prodotti e gallerie - Immagini di blog e articoli - Ritagli trasparenti sul web ### Usa PNG o JPG - Caricamenti su Instagram, LinkedIn, X e Facebook - Immagini di anteprima dei link Open Graph - File che invii per email o ai clienti - Master che modificherai 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](https://gradiently.design/it/guide/open-graph-image-size) come PNG o JPG 1200×630. E un WebP inviato a un cliente spesso si apre nell’app sbagliata o non si apre affatto. Un’ampia immagine di anteprima di link che annuncia una collezione primavera su uno sfondo sfumato Un’anteprima di link in 1200×630. Tienila in PNG così il crawler di ogni piattaforma può leggerla. ## 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. ```bash # 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 ``` Conserva gli originali PNG. Riconvertire un WebP in PNG non ripristina i dettagli persi con la compressione con perdita. 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](https://gradiently.design/it/guide/image-compression); per la coppia più vecchia, [PNG o JPG](https://gradiently.design/it/guide/png-vs-jpeg); e per la checklist completa sulla velocità, [ottimizzare le immagini per il web](https://gradiently.design/it/guide/lighthouse-image-performance). ## FAQ ### WebP è meglio di PNG? Su un sito, di solito sì: il WebP senza perdita mantiene gli stessi pixel in un file più leggero e supporta la trasparenza. Per i caricamenti sui social e per i file che invii alle persone, il PNG è più sicuro perché si apre ovunque. ### Tutti i browser supportano WebP? Tutte le versioni attuali di Chrome, Safari, Firefox ed Edge supportano WebP. Usa un elemento `picture` con un fallback JPG o PNG se devi raggiungere browser molto vecchi. ### Meglio AVIF o WebP? AVIF di solito è più leggero, WebP si codifica più in fretta ed è supportato da più strumenti. Servire prima AVIF con un fallback WebP dà alla maggior parte dei visitatori il file più piccolo. ### Posso caricare WebP su Instagram? Il supporto è incostante, quindi carica invece un PNG o JPG alla dimensione esatta, come 1080×1350 per un post verticale. ### WebP supporta la trasparenza? Sì, sia nella modalità con perdita sia in quella senza perdita, il che lo rende un buon sostituto dei PNG trasparenti sul web.