Miglior formato per il Web: JPG, PNG, WebP o AVIF?

JPG, PNG, WebP e AVIF a confronto

Consulta il riferimento MDN sui formati per capacità e compatibilità. Il supporto del formato non implica che ogni editor o servizio lo accetti.

Che cosa conservano le compressioni con e senza perdita

La codifica con perdita modifica parte delle informazioni dei pixel per ridurre il file. Una fotografia può tollerare una piccola variazione della texture, mentre la stessa variazione attorno a una lettera può renderla meno leggibile. La compressione senza perdita conserva i dati dei pixel che riceve. Convertire un JPG già compresso in PNG non recupera i dettagli persi nel JPG; può semplicemente produrre un file più grande.

WebP supporta entrambe le modalità, come spiega la documentazione WebP di Google. Il nome del formato non indica da solo la modalità usata e la qualità 100 non garantisce un risultato senza perdita. Conserva la migliore sorgente disponibile e crea da questa ogni versione da pubblicare, evitando una catena di conversioni con perdita. Consulta la guida alla compressione con e senza perdita per capire la differenza.

Foto: confronta WebP e AVIF con il JPG attuale

La foto delle montagne qui sotto confronta vere esportazioni di Pixilo. Il JPG fornito pesa 413,1 kB; Pixilo ha prodotto un WebP da 299,0 kB con qualità 80 e un AVIF da 275,7 kB con la preimpostazione di qualità 65. Tutte e tre le immagini misurano 1920 × 1440 pixel. WebP risparmia circa il 28% e AVIF circa il 33% rispetto a questo JPG. In questo esempio, l’AVIF è circa l’8% più piccolo del WebP.

Sono misure di file completi ottenuti da un solo JPG già compresso. Le impostazioni di qualità dipendono dal formato e queste esportazioni non sono state calibrate per ottenere una qualità visiva identica. Considerale esempi da esaminare, non una classifica universale. Nel confronto a scorrimento cerca texture rocciose ammorbidite, aloni lungo il profilo delle cime e bande nel cielo uniforme. Valuta l’immagine intera alla dimensione prevista e poi usa la vista di dettaglio per controllare i punti dubbi.

Ripeti la prova con un’immagine rappresentativa del tuo sito: un tessuto per un negozio o un volto per una pagina del team. Crea entrambe le versioni dalla stessa sorgente con le stesse dimensioni: per un JPG usa JPG in WebP e JPG in AVIF. Per altre sorgenti usa PNG in AVIF o WebP in AVIF. Scegli la versione più piccola con dettagli ancora accettabili; anche mantenere l’originale è sensato se soddisfa già le esigenze. Per grandi gruppi di immagini considera anche il tempo di conversione.

JPG originaleWebP di Pixilo

Grafica: proteggi bordi, testo e trasparenza

Testo e diagrammi rivelano rapidamente i difetti della compressione: un alone colorato attorno a una lettera o una linea di un pixel interrotta possono contare più di una lieve variazione in un paesaggio. La grafica sotto confronta un PNG da 109,2 kB con le esportazioni JPG, WebP e AVIF di Pixilo, tutte a 960 × 640 pixel. L’AVIF pesa solo 6,4 kB, ma il risparmio è utile soltanto se i testi e i tratti più piccoli rimangono abbastanza nitidi.

Cambia formato ed esamina le stesse lettere e gli stessi bordi colorati nella vista di dettaglio. Poi torna all’immagine intera per giudicare la normale dimensione di lettura. Sono esempi di conversioni con perdita, non prove di WebP o AVIF senza perdita. Se uno screenshot documenta un prezzo, un messaggio di errore o un’impostazione software, dai priorità a un testo leggibile e fedele rispetto al file più piccolo. Mantieni il PNG se le alternative non superano questa prova.

La trasparenza è un requisito distinto dalla nitidezza: PNG, WebP e AVIF la supportano; JPG no. Per una foto prodotto trasparente, prova PNG in WebP e controlla contorno e ombra su sfondi sia chiari sia scuri. Prima di esportare in JPG, scegli intenzionalmente uno sfondo a tinta unita. La grafica opaca qui sotto non verifica i bordi trasparenti.

Se un logo esiste già in SVG, tieni la sorgente vettoriale. Rasterizzarlo solo per comprimerlo può togliere il vantaggio di scalarlo nitidamente. Gli strumenti raster Pixilo accettano i tipi indicati su ciascuno strumento. Leggi la guida a SVG e PNG per capire quando mantenere il formato vettoriale e quando creare una copia PNG.

PNG originaleJPG di Pixilo

Scegli le dimensioni prima di cercare il file più piccolo

Pianifica per lo spazio effettivo. Una foto visualizzata a 600 pixel CSS può avere una versione da 1200 pixel per schermi ad alta densità di pixel. È un esempio da provare, non una regola universale. Ingrandire un originale piccolo non ricrea dettagli mancanti.

Raddoppiare sia la larghezza sia l’altezza quadruplica il numero di pixel. Il peso del file non deve necessariamente quadruplicare, ma il codificatore deve rappresentare più dati. Scegli prima il ritaglio e le dimensioni necessarie, poi confronta i formati alle stesse dimensioni per distinguere il vantaggio del ridimensionamento da quello del cambio di formato.

Un sito può fornire dimensioni diverse per layout diversi con impostazioni responsive come srcset e sizes. Prepara le varianti con Ridimensiona immagine e consulta la guida alle immagini responsive per capire come distribuirle. Evita un unico limite di peso per ogni immagine: una piccola scheda e uno zoom prodotto dettagliato hanno scopi diversi.

Controlla anche il caricamento

Riserva lo spazio per evitare salti del contenuto. Il caricamento differito può servire per immagini più in basso, ma ritardare quella principale visibile. Le indicazioni LCP di Google raccomandano di rendere l’immagine importante individuabile presto e di non usare lazy loading per quella LCP.

Se serve un formato alternativo, configuralo nel codice o nel CMS. Con un elemento picture, il browser usa la prima sorgente che corrisponde ai formati supportati e alle altre condizioni; non confronta tutti i file per scegliere il più piccolo. Metti per primo il formato testato che preferisci e conserva un JPG o PNG adatto come alternativa. La guida a picture di web.dev spiega la selezione.

Controlla l’immagine effettivamente distribuita dalla pagina pubblicata. Un CMS o CDN per immagini può ridimensionare o ricodificare il caricamento: i visitatori potrebbero ricevere un file diverso da quello scaricato da Pixilo. Pixilo prepara i file; il tuo sito ne gestisce la distribuzione. Un’esportazione più piccola da sola non risolve una richiesta dell’immagine tardiva o una risposta lenta del server.

Controllo prima della pubblicazione

• La destinazione accetta il formato e l’estensione è corretta.
• Le dimensioni sono adatte al layout.
• Testo, volti e bordi trasparenti restano accettabili.
• Il file è minore o risolve una reale esigenza di compatibilità.
• La pagina funziona su schermi stretti e l’immagine importante arriva presto.
• L’originale è conservato per modifiche future.