Formati immagine
AVIF o WebP: quale formato scegliere?
Confronta AVIF e WebP per le immagini del sito: qualità, peso dei file, trasparenza e versioni alternative, con un metodo pratico di esportazione.
AVIF e WebP: le differenze che contano
Entrambi possono ridurre la quantità di dati che un sito invia ai visitatori. Nessuno garantisce un file più piccolo per ogni immagine. Un paesaggio ricco di dettagli, un’illustrazione con colori uniformi e una foto di prodotto trasparente reagiscono diversamente alla compressione. La sorgente, le impostazioni di esportazione e le dimensioni di visualizzazione contano quanto l’estensione.
| Domanda | AVIF | WebP |
|---|---|---|
| Comprime le fotografie? | Sì; confronta dettagli e dimensioni del file | Sì; confronta dettagli e dimensioni del file |
| Mantiene le aree trasparenti? | Sì, con un encoder adatto | Sì, con un encoder adatto |
| Consente la compressione senza perdita? | Il formato la supporta; lo strumento deve offrirla | Il formato la supporta; lo strumento deve offrirla |
| E per l’HDR? | Può contenere dati HDR; l’intero processo deve conservarli | Usa un altro processo se devi conservare l’HDR |
| Occorre verificare il sito? | Controlla distribuzione, supporto del browser e qualità visiva | Controlla distribuzione, supporto del browser e qualità visiva |
Queste sono possibilità dei formati, non funzioni presenti in ogni convertitore. La guida MDN ai formati immagine descrive le capacità di AVIF; la documentazione WebP di Google spiega compressione e trasparenza in WebP. Per la scelta più ampia, inclusi JPG, PNG e grafica con testo, consulta la guida ai formati immagine per siti web.
AVIF è sempre più piccolo di WebP?
No. Il confronto a scorrimento seguente mostra due vere esportazioni Pixilo dallo stesso JPG di 1920 × 1440 pixel: un WebP da 299,0 kB con qualità 80 e un AVIF da 275,7 kB con la preimpostazione fissa di qualità 65. L’AVIF risparmia 23,3 kB, circa l’8% rispetto al WebP. Questo è il confronto pertinente per sostituire quel WebP, anche se AVIF risparmia circa il 33% rispetto al JPG sorgente da 413,1 kB.
Entrambe le versioni sono state create direttamente da quel JPG, senza ridimensionamento. Sono pesi di file completi con impostazioni diverse e specifiche di ogni formato; le esportazioni non sono state calibrate per ottenere la stessa qualità visiva. La sorgente era già compressa, quindi nessuna esportazione può recuperare i dettagli persi. Il risultato descrive questi file e queste impostazioni, non un risparmio garantito con AVIF.
Trascina il divisore sulla texture delle rocce, sul profilo delle montagne e sul cielo uniforme. Nella vista di dettaglio cerca texture ammorbidite, aloni e bande di colore, poi torna all’immagine intera per valutare se la differenza conta alla dimensione prevista. Se non accetteresti l’aspetto di una versione, confronta un’altra esportazione prima di scegliere in base al peso.
Esportazioni Pixilo dallo stesso JPG: WebP con qualità 80, AVIF con qualità 65. Entrambe di 1920 × 1440 px. Trascina il divisore o usa le frecce per confrontare. Le impostazioni di qualità dipendono dal formato. Foto: Pexels.
Quando conviene scegliere AVIF?
Prova AVIF sulle foto che contribuiscono sensibilmente ai dati scaricati da una pagina: grandi viste prodotto, foto editoriali e banner. Valuta il risparmio sia in byte sia in percentuale. I 23,3 kB risparmiati sopra sono una riduzione modesta per un’immagine; il valore pratico dipende dalla frequenza di caricamento e dal lavoro aggiunto dall’alternativa alla pubblicazione.
Prima di convertire una libreria, prova un gruppo rappresentativo: tessuti fini o capelli, zone scure e sfumature regolari. Mantieni le dimensioni costanti e scarta le versioni che perdono dettagli importanti. AVIF è una sostituzione utile quando il risparmio residuo conta e il sito può distribuirlo in modo affidabile. Conserva WebP per le immagini in cui questo compromesso non conviene.
Il supporto HDR del formato non trasforma una normale conversione in un processo HDR. Lo strumento AVIF di Pixilo genera attualmente un’esportazione a 8 bit con perdita dai pixel decodificati dal browser. Non offre la conservazione dell’HDR né un’opzione senza perdita. Tieni un originale separato per archivio, stampa o lavori specialistici sul colore.
Quando mantenere WebP?
Mantieni WebP se l’immagine è già buona, il file ha dimensioni adatte e il sito lo gestisce correttamente. Sostituirlo solo perché un altro formato è più recente aggiunge lavoro senza un vantaggio garantito. Anche il sistema di pubblicazione, il servizio immagini o l’editor possono rendere WebP più semplice da usare.
Controlla con particolare attenzione le grafiche con testo e bordi netti. Se la compressione con perdita rovina le etichette piccole o crea artefatti attorno alle linee, valuta uno strumento con WebP senza perdita oppure conserva PNG. I convertitori WebP di Pixilo non hanno una modalità dedicata senza perdita. La guida PNG vs WebP approfondisce questa scelta.
Se il destinatario o il modulo richiede JPG o PNG, rispetta prima quel requisito. Un formato adatto al tuo sito può essere rifiutato da un sistema di invio. La versione distribuita sul sito e quella da scaricare non devono necessariamente avere lo stesso formato.
Come confrontare AVIF e WebP con Pixilo
- Parti dall’originale. Usa una sorgente JPG, PNG o WebP e conservala separatamente. Non ricavare una versione di prova da un’altra già compressa.
- Imposta prima le dimensioni. Se necessario, usa lo strumento di ridimensionamento per creare una sorgente comune. Per questo confronto, mantieni il lato più lungo entro 4000 pixel.
- Crea la versione AVIF. Usa JPG → AVIF / PNG → AVIF / WebP → AVIF. Lo strumento attuale usa una preimpostazione fissa con perdita di qualità 65 e conserva le dimensioni della sorgente; non offre un cursore di qualità AVIF.
- Crea WebP dalla stessa sorgente. Usa JPG in WebP o PNG in WebP. Regola la qualità WebP osservando il risultato. Questi convertitori offrono un limite di 4000 pixel sul lato più lungo, attivo per impostazione predefinita. Verifica che il ridimensionamento non abbia modificato solo una delle due versioni.
- Controlla entrambi i file scaricati. Verifica prima dimensioni e qualità visiva. Poi dividi la differenza in byte per il peso del WebP per calcolare il risparmio della sostituzione. Conserva WebP se l’AVIF è più grande o se il file più piccolo perde dettagli necessari.
- Verifica il sito. Controlla l’immagine pubblicata su telefono e computer, compresi ritaglio e dimensioni effettive. Conserva la versione precedente finché non hai verificato la nuova.
I valori di qualità non costituiscono una scala comune tra formati o encoder. Impostare 65 per AVIF e 65 per WebP non garantisce la stessa qualità. Pixilo elabora le immagini localmente nel browser. L’encoder AVIF viene scaricato quando serve, quindi la prima conversione comprende anche il suo caricamento.
Cosa controllare oltre al peso del file?
Dettagli fini e testo
Esamina capelli, erba, tessuti e scritte piccole al 100%, poi torna alle dimensioni che vedranno i visitatori. Lo zoom rivela i difetti; la visualizzazione normale aiuta a capire se contano. Negli screenshot, la leggibilità è spesso più importante del file più piccolo possibile.
Sfumature e zone scure
Cerca bande visibili nei cieli, negli sfondi da studio e nelle ombre. Le aree scure devono mantenere dettagli utili, senza diventare macchie uniformi. Se un risultato appare sbagliato, usa un’esportazione meno aggressiva o un altro formato: un file più piccolo non è automaticamente migliore.
Trasparenza e bordi
Visualizza le immagini trasparenti su sfondi chiari e scuri. Un alone chiaro attorno a un prodotto può scomparire sul bianco ed essere evidente sul nero. Per capire un problema di sfondo, consulta perché un’immagine trasparente può sembrare avere uno sfondo bianco o nero.
Colore, animazione e originale
Non dare per scontato che il convertitore conservi ogni funzione del formato. Pixilo ridisegna l’immagine decodificata per esportarla; non è progettato per mantenere l’animazione, le informazioni HDR o tutti i metadati originali. Controlla il risultato e conserva la sorgente quando questi elementi sono importanti.
Qui, 100% significa la dimensione reale in pixel in un visualizzatore: un pixel dell’immagine corrisponde a un pixel dello schermo. Lo zoom della pagina nel browser è un’altra impostazione.
Distribuire AVIF con una versione alternativa WebP o JPG
I principali browser attuali supportano entrambi i formati, ma browser più vecchi e alcuni visualizzatori incorporati possono richiedere un’alternativa. Se gestisci l’HTML, l’elemento picture permette di offrirla. I nomi qui sono esempi: crea e carica i file reali prima di usare il codice.
<picture>
<source srcset="/images/product.avif" type="image/avif">
<source srcset="/images/product.webp" type="image/webp">
<img src="/images/product.jpg" width="1200" height="800"
alt="Giacca verde vista di fronte">
</picture>Il browser sceglie la prima sorgente adatta che supporta; non scarica tutte e tre le immagini per confrontarne il peso. Metti AVIF per primo solo se vuoi che i browser compatibili lo usino. img fornisce la versione alternativa, le dimensioni e il testo alternativo. Usa PNG al posto di JPG se serve la trasparenza. Consulta la documentazione MDN su picture.
In un CMS, controlla cosa genera e distribuisce davvero il servizio immagini o il plugin. Caricare un AVIF non crea da solo versioni responsive o file alternativi. Dopo la pubblicazione, esamina le richieste delle immagini, soprattutto se una cache o una CDN può distribuire ancora la versione precedente.
AVIF migliora velocità e SEO?
Un’immagine più piccola può ridurre il tempo di trasferimento, ma l’estensione non garantisce una pagina più veloce. Contano anche le dimensioni di visualizzazione, la scelta della versione responsive, la cache e il momento in cui il browser trova l’immagine. Un AVIF sovradimensionato può essere peggiore di un WebP dimensionato bene.
Distingui il tempo di esportazione dal tempo di distribuzione. Non abbiamo misurato la velocità di codifica dei file del confronto. Per valutare il tuo flusso, cronometra un gruppo rappresentativo sul tuo dispositivo e registra separatamente la prima conversione: Pixilo carica il codificatore AVIF quando serve. Con file preparati, i visitatori non attendono questa fase. Un servizio che genera varianti su richiesta deve considerare anche elaborazione e cache. Impostazioni e implementazione influiscono sul costo, come spiega l’articolo di web.dev sulla codifica AVIF.
Google supporta AVIF e WebP in Google Immagini. Cambiare formato non sostituisce contenuti utili, testo alternativo descrittivo o un URL accessibile. Mantieni un elemento img con src quando usi picture e un’estensione coerente con il formato reale. Consulta le indicazioni Google sulla SEO delle immagini.
Misura la pagina finita invece di prevedere un miglioramento delle posizioni da un cambio di file. Per priorità di caricamento e stabilità del layout, leggi come le immagini influiscono sui Core Web Vitals.
Domande frequenti
Devo convertire ogni WebP in AVIF?
No. Prova prima un piccolo gruppo rappresentativo. Sostituisci le immagini quando il risultato è utile e il sistema di distribuzione lo supporta. Mantieni WebP quando offre il compromesso migliore per quell’immagine.
Perché il mio AVIF è più grande del WebP?
Controlla prima dimensioni in pixel e qualità visiva. Le esportazioni possono usare impostazioni diverse, oppure l’immagine si comprime meglio con le impostazioni WebP. Un AVIF più grande non è un motivo per sostituire un buon WebP.
Convertire JPG in AVIF recupera la qualità?
No. La conversione non recupera i dettagli persi in una precedente esportazione JPEG. Parti dal migliore originale disponibile e valuta aspetto e peso della nuova copia.
Posso rinominare .webp in .avif?
No. Cambia il nome, non la codifica. Usa un convertitore e distribuisci il risultato con l’estensione e il tipo di contenuto corretti.
E se AVIF appare peggiore in Pixilo?
L’esportazione AVIF di Pixilo usa un’impostazione fissa. Se non è adatta, regola un’esportazione WebP, mantieni l’originale o scegli un encoder con i controlli necessari. Quel risultato non rappresenta tutte le possibili esportazioni AVIF.
Confronta un’immagine prima di modificare il sito
Crea una versione AVIF dalla sorgente, controlla dettagli e peso, poi confronta un WebP alle stesse dimensioni.
JPG → AVIF / PNG → AVIF / WebP → AVIFCrea una versione WebP →