Tre formati coprono quasi tutte le foto presenti oggi sul web JPG è stato il default per tre decenni WebP è arrivato nel 2010 ed è ora visualizzato da ogni browser attuale AVIF è il più recente dei tre, costruito su un codec video, e di solito fa i file più piccoli Un controllo delle prestazioni ti dirà a & quot; servi le immagini nei formati moderni" e poi un modulo di caricamento o un client di posta elettronica rifiuterà il file moderno che hai fatto.
Scegliere tra loro è meno su quale formato è meglio e più su dove l'immagine sta andando Un'immagine eroe su una pagina di destinazione, una foto del prodotto in un elenco di mercato e un'immagine allegata a un'e-mail hanno risposte diverse Questa guida confronta i tre sugli attributi che lo decidono: dimensione del file, qualità, trasparenza, profondità del colore, animazione, costo di codifica e supporto al di fuori del browser Quindi dà una tabella decisionale e mostra come convertire tra di loro.
tl; dr: Per le immagini su un sito Web, servi prima AVIF con WebP come fallback e JPG come ultima risorsa, utilizzando il
<picture>negoziazione di elementi o server; AVIF è solitamente più piccolo, WebP è molto indietro e più veloce da codificare e JPG si apre ovunque Per le immagini che lasciano il browser (e-mail, caricamenti, stampa, software per ufficio), utilizzare JPG o PNG quando la trasparenza è importante Per far accettare file di altri programmi, il Convertitore da AVIF a JPG e WebP a JPG eseguire lato client, nulla caricato, gratuito, nessuna registrazione; JPG a WebP e PNG a WebP andare dall'altra parte.
Cosa sono AVIF, WebP e JPG?
Tutti e tre sono formati di immagine raster per fotografie e differiscono principalmente per l'età e il design della compressione.
JPG (JPEG) è il metodo dell'immagine fissa standardizzato in Raccomandazione ITU-T T.81 nel 1992. divide l'immagine in blocchi di 8x8 pixel, trasforma ciascuno con una trasformata discreta del coseno e scarta il dettaglio ad alta frequenza che l'occhio nota meno. I file sono solitamente avvolti nel contenitore JFIF da ITU-T T.871.
webp è il formato Google's, ora specificato in RFC 9649. La sua modalità con perdita di dati utilizza la codifica del fotogramma chiave del codec video VP8 e dispone di una modalità senza perdita di dati separata, oltre a trasparenza e animazione. La guida su che cos'è WebP e perché le immagini salvate escono come .webp lo copre in profondità.
avifa è il formato file immagine AV1, pubblicato dall'Alliance for Open Media come Specifica AVIF. Memorizza le immagini codificate con il Codec video AV1 all'interno di un contenitore HEIF, la stessa struttura di scatola utilizzata dalle foto di iPhone HEIC. AV1 è offerto con una licenza di brevetto esente da royalty dell'Alliance for Open Media, motivo per cui i browser hanno adottato AVIF più velocemente di HEIC.
AVIF vs WebP vs JPG: la tabella comparativa
AVIF guida su compressione e capacità, JPG guida sulla compatibilità e velocità di codifica e WebP si trova tra loro su quasi ogni riga.
| Attribute | avifa | webp | JPG |
|---|---|---|---|
| Specificazione | AOMedia AVIF, codec AV1 | IETF RFC9649 | ITU-T T.81 e T.871 |
| Introdotto | 2019 | 2010 | 1992 |
| Compressione | Perdente o senza perdite | Perdente o senza perdite | impertinente |
| Dimensione tipica della foto | Più piccolo | Piccolo | Il più grande dei tre |
| Profondità bit | 8, 10 o 12 bit per canale | 8 bit per canale | 8 bit per canale in pratica |
| HDR e colore ampio | certo | no | no |
| trasparenza | Alfa completo | Alfa completo | nessuno |
| Animazione | Sequenze d'immagine | certo | no |
| Velocità di codifica | Lento, CPU-pesante ad alto sforzo | Moderato | forte |
| Esposizione browser | Chrome 85, Firefox 93, Safari 16, Edge 121 e versioni successive | Tutti i browser attuali | Universale |
| App desktop, e-mail, moduli di caricamento | Più debole | Attorno | Universale |
| Miglior utilizzo | Immagini web più grandi dove i byte contano di più | Immagini web generali, ampio ripiego | Tutto ciò che lascia il browser |
La riga che sorprende le persone è la velocità di codifica AVIF's piccoli file provengono da un codificatore che cerca duramente il modo migliore per codificare ogni blocco e che la ricerca richiede tempo Un passaggio di compilazione che converte migliaia di immagini di prodotti in WebP in pochi minuti può richiedere molto più tempo per AVIF con un'impostazione ad alto sforzo Per un sito che codifica una volta e serve milioni di volte, il commercio di solito vale la pena Per le immagini generate al volo per richiesta, potrebbe non esserlo.
Quale formato rende i file più piccoli?
AVIF di solito realizza i file più piccoli con una qualità visiva simile, WebP è il successivo e JPG è il più grande La dimensione del gap dipende fortemente dall'immagine e dalle impostazioni dell'encoder.
Per WebP esiste un punto di riferimento pubblicato: Google's Panoramica WebP segnala file WebP con perdita dal 25 al 34% più piccoli rispetto a JPEG comparabili con qualità SSIM equivalente e WebP senza perdita dal 26% più piccolo di PNG. AVIF migliora comunemente nuovamente il WebP per le fotografie, con i maggiori guadagni su pendenze lisce, cieli e pelle, dove JPEG' i blocchi 8x8 vengono visualizzati per primi.
Tre ammonizioni mantengono onesti questi numeri.
- I numeri di qualità non corrispondono tra i formati. Un JPG a qualità 80, un WebP a 80 e un AVIF a 80 non sono la stessa qualità visiva, e anche diversi encoder per lo stesso formato non sono d'accordo Confronta i file guardandoli, o da una metrica come SSIM, mai dal valore del cursore.
- Le immagini a basso dettaglio risparmiano meno. Un'illustrazione piatta o un JPEG già fortemente compresso ha poco da spremere.
- La ricodifica di un file con perdita di perdite si accumula in perdite. La conversione di un JPG in AVIF o WebP parte da un'immagine che ha già perso i dettagli Codifica dal file della fotocamera originale, PNG o master di alta qualità ogni volta che puoi.
Quanto conta la scelta del formato per il peso della pagina?
È più importante sulle pagine ricche di immagini, perché le immagini sono solitamente la quota maggiore di ciò che scarica un visitatore L'aritmetica è semplice Una pagina di catalogo con 40 foto di prodotti a circa 400 KB ciascuna trasporta 16 MB di immagini come JPG Al 25-34% di salvataggio di report Google per WebP, lo stesso set arriva da qualche parte tra circa 10,5 e 12 MB. AVIF in genere si taglia ulteriormente oltre a quello.
Su una connessione desktop veloce la differenza è modesta Su un telefono su una rete mobile lenta, diversi megabyte è il divario tra una pagina che si deposita rapidamente e una che i visitatori abbandonano, e le immagini vicino alla parte superiore della pagina si alimentano direttamente in quanto velocemente l'elemento visibile più grande rende.
Il formato non è l'unica leva, e spesso non la più grande L'invio di una foto larga 4000 px a uno slot da 400 px spreca molti più byte rispetto alla scelta di WebP rispetto ad AVIF Ridimensionare prima alla dimensione visualizzata, fornire srcset varianti per schermi diversi, immagini a caricamento lento sotto la piega e quindi scegli il formato. Farlo nell'altro ordine ottimizza la cosa sbagliata.
Come si differenziano per qualità e artefatti?
Ogni formato fallisce a modo suo quando viene spinto a dimensioni ridotte e conoscere il fallimento ti aiuta a scegliere.
JPG si rompe in blocchi 8x8 visibili e & quot;ringing", deboli increspature attorno a spigoli vivi come il testo su una foto WebP's lossy mode ammorbidisce i dettagli e, poiché memorizza il colore a metà risoluzione, può lasciare frange colorate attorno a sottili linee rosse o blu AVIF tende a sfocare la trama fine piuttosto che a bloccarsi, quindi un AVIF fortemente compresso sembra liscio e leggermente ceroso, il che è meno discutibile nelle foto e più evidente in tessuto, capelli e fogliame.
Per la grafica con bordi rigidi, colore piatto e testo, nessuna delle modalità con perdita è ideale PNG o WebP senza perdita mantiene i bordi esatti.
Anche il comportamento di caricamento differisce T.81 definisce una modalità progressiva per JPEG, in cui una versione sfocata dell'intera immagine appare per prima e si affina man mano che arrivano più dati, quindi un grande JPG progressivo si sente veloce su una connessione lenta anche prima di finire WebP e AVIF come comunemente servito disegnano solo una volta che è arrivato abbastanza del file, cosa che di solito compensa la loro dimensione più piccola Su immagini di eroi molto grandi su connessioni scadenti, quella differenza può essere visibile, ed è un motivo in più per ridimensionare prima di scegliere un formato.
Dove si adattano PNG e GIF?
Nessuno dei due è un formato fotografico, e nessuno dei due compete direttamente con i tre sopra PNG, definito nel Specifica PNG W3C, è senza perdita di dati: la scelta giusta per screenshot, diagrammi, loghi e master di editing, e quella sbagliata per le fotografie, che memorizza a diverse volte le dimensioni di un JPG. GIF è limitata a 256 colori per fotogramma e sopravvive principalmente per brevi animazioni in luoghi che non riprodurranno nulla di più recente.
Su un sito web, entrambi sono solitamente meglio serviti come WebP o AVIF: lossless o lossy di alta qualità per la grafica in stile PNG, WebP animato per clip in stile GIF. All'esterno del browser, PNG rimane il formato sicuro per qualsiasi cosa con trasparenza, dal momento che JPG non può tenerlo.
Quale formato supporta trasparenza, HDR e animazione?
AVIF supporta tutti e tre, WebP supporta trasparenza e animazione ma non HDR e JPG non supporta nessuno di essi.
Trasparenza. AVIF memorizza alfa come immagine ausiliaria e WebP ha un canale alfa sia in modalità con perdita che senza perdita di dati. Entrambi possono contenere un ritaglio del prodotto con un bordo morbido a una frazione di una dimensione PNG' JPG non ha trasparenza, quindi qualsiasi area trasparente deve essere riempita con un colore solido durante la conversione ad esso.
HDR e colore ampio. AVIF può utilizzare 10 o 12 bit per canale, che è ciò che le foto HDR di telefoni e fotocamere recenti hanno bisogno per evitare di fasciare in cieli luminosi WebP e JPG sono a 8 bit.
Animazione. Le animazioni WebP sono ampiamente utilizzate come sostituto più piccolo della GIF. AVIF definisce le sequenze di immagini, sebbene il supporto per AVIF animato nel software esterno ai browser sia più sottile.
Dove fallisce ancora ogni formato?
Il supporto all'interno dei browser attuali è risolto per tutti e tre Il supporto ovunque è dove la scelta morde.
AVIF visualizza in Chrome dalla versione 85, Firefox dalla 93, Safari dalla 16 e Edge dalla 121 I browser più vecchi, i visualizzatori di foto dei sistemi operativi meno recenti, molte suite per ufficio e un lungo elenco di moduli di caricamento non lo accettano Salvare un AVIF da una pagina web e rilasciarlo in una presentazione è il classico fallimento.
Il WebP è più avanti Ogni browser attuale lo visualizza e la maggior parte dei sistemi operativi moderni lo apre, ma alcuni client di posta elettronica, servizi di stampa e software desktop più vecchi lo rifiutano ancora.
JPG si apre essenzialmente su ogni dispositivo, applicazione e modulo Ecco perché rimane il formato giusto per qualsiasi immagine di cui non controlli la destinazione.
Quale formato utilizzare? una tabella decisionale
Decidere prima per destinazione, poi per contenuto.
| situazione | maneggiare | perché |
|---|---|---|
| Immagini di eroi e prodotti sul tuo sito | AVIF, con fallback WebP e JPG | Byte più piccoli sulle immagini più pesanti |
| Immagini generali del sito, pipeline semplice | WebP, con ripiego JPG | Supporto browser quasi universale, veloce da codificare |
| Immagini generate per richiesta | WebP o JPG | Il costo della codifica AVIF aggiunge latenza |
| Foto con HDR o a colori larghi | avifa | Solo uno dei tre con 10 e 12 bit |
| Grafica trasparente sul web | AVIF o WebP | Alpha a una frazione di PNG's dimensione |
| Allegati e-mail | JPG | Ogni cliente lo apre |
| Carica moduli, marketplace, portali ID | JPG | Gli elenchi di autorizzazioni raramente includono AVIF o WebP |
| Stampa e documenti d'ufficio | JPG, o PNG per la grafica | Supporto software |
| Redazione di master e archivi | Formato originale, PNG o TIFF | Evitare la codifica con perdita ripetuta |
Il modello è semplice: formati moderni per la consegna, JPG per lo scambio, senza perdita di dati per i master.
Come si serve AVIF e WebP con un fallback JPG?
Usa il <picture> elemento. Il browser cammina lungo il <source> elencare in ordine e prende il primo tipo che supporta, ricadendo sul <img>, come definito dal WHATWG HTML picture elemento:
<picture>
<source srcset="hero-1600.avif" type="image/avif">
<source srcset="hero-1600.webp" type="image/webp">
<img src="hero-1600.jpg" width="1600" height="900" alt="Mountain lake at sunrise">
</picture>
Un browser con supporto AVIF scarica solo l'AVIF. Uno senza AVIF ma con WebP scarica il WebP, e tutto il resto ottiene il JPG Nessun formato viene scaricato due volte.
L'alternativa è la negoziazione lato server: il browser invia un Accept intestazione come image/avif,image/webp,*/*, e il server o CDN restituisce il miglior formato che ha da un singolo URL Questo mantiene il markup semplice ma richiede che la cache vari su quell'intestazione, come descritto in HTTP' s regole di negoziazione del contenuto in RFC9110.
Per generare le tre versioni in una fase di compilazione, la libreria Node.js sharp le scrive tutte:
import sharp from 'sharp'
const input = sharp('hero-master.png').resize(1600)
await input.clone().avif({ quality: 50 }).toFile('hero-1600.avif')
await input.clone().webp({ quality: 80 }).toFile('hero-1600.webp')
await input.clone().jpeg({ quality: 82, mozjpeg: true }).toFile('hero-1600.jpg')
I valori di qualità differiscono di proposito, poiché le scale non corrispondono tra i formati Controllare visivamente l'output prima di stabilirsi sui numeri.
Come si fa a convertire tra AVIF, WebP e JPG senza caricare?
Usa un convertitore lato client, che decodifica e ricodifica l'immagine all'interno della scheda del browser in modo che il file non lasci mai il tuo dispositivo I convertitori Toolz sono divisi per direzione.
Da AVIF a qualcosa che altri programmi accettano. la Convertitore da AVIF a JPG la correzione per un AVIF salvato da un sito Web che un documento o un modulo rifiuta Le aree trasparenti sono riempite di bianco, e una nota sotto il risultato lo dice Il cursore Qualità va da 10 a 100 e inizia da 90 Quando l'immagine ha uno sfondo trasparente che deve sopravvivere, convertire l'AVIF in PNG invece, che mantiene il canale alfa e memorizza i pixel decodificati senza perdite.
Decodifica AVIF utilizza il browser's proprio decoder AVIF, quindi il convertitore ha bisogno di un browser che visualizza AVIF: Chrome, Edge, Firefox, o Safari 16 e versioni successive Se il browser non può aprire il file, la riga dice così Un AVIF animato viene letto come immagine fissa.
Dal WebP al JPG. Per le stesse ragioni, WebP a JPG trasforma un 'webp scaricato in un file che si apre ovunque, con lo stesso riempimento bianco per trasparenza.
Da JPG e PNG a WebP. Andando dall'altra parte, JPG a WebP riduce le foto per la pubblicazione e PNG a WebP fa lo stesso per gli screenshot e la grafica trasparente mantenendo il canale alfa La codifica utilizza il browser' s codificatore canvas Attuali Chrome, Edge e Firefox possono scrivere WebP; un browser che non può ottenere un errore chiaro invece di un PNG rinominato in .webp.
Cosa non fanno i convertitori. Toolz legge AVIF ma non lo scrive, perché i browser non espongono in modo affidabile un codificatore AVIF alle pagine web, per produrre file AVIF, utilizzare uno strumento di compilazione come l'esempio nitido sopra Il Convertitore di immagini accetta JPG, JFIF, PNG, WebP, AVIF, GIF, BMP, ICO, HEIC, TIFF, PSD, SVG, CR2, DNG e PDF e scrive JPG, PNG, WebP, GIF, ICO, PDF e SVG, che copre lotti misti.
Ogni conversione viene disegnata attraverso un canvas, quindi i dati EXIF, le coordinate GPS e i profili colore non vengono copiati nell'output Le immagini superiori a 100 megapixel vengono rifiutate con un messaggio anziché mandare in crash la scheda Gli strumenti sono gratuiti, nessuna registrazione, con un limite di conversione giornaliero.
La conversione tra AVIF, WebP e JPG perde qualità?
La conversione in un formato con perdita perde ogni volta qualche dettaglio, e la conversione in un formato senza perdita di dati non perde nulla di più La direzione decide quale si applica.
| conversione | Passo perduto? | Cosa cambia |
|---|---|---|
| AVIF a JPG | certo | Seconda codifica con perdita; trasparenza riempita di bianco; file solitamente più grande |
| AVIF a PNG | no | Pixel decodificati mantenuti esattamente; trasparenza mantenuta; file molto più grande |
| WebP a JPG | certo | Seconda codifica con perdita; trasparenza piena di bianco |
| JPG a WebP | certo | Seconda codifica con perdita sopra JPEG's; file solitamente più piccolo |
| PNG a WebP | Di solito, con WebP con perdita | Trasparenza mantenuta; file solitamente molto più piccolo |
| Ognuno di loro ad AVIF | Sì, nell'uso tipico | File più piccolo; codifica più lenta |
Seguono due conseguenze pratiche Un file che ha attraversato diverse conversioni con perdita di dati si degrada un pò ad ogni passaggio, quindi evita viaggi di andata e ritorno come JPG in WebP in JPG E la dimensione di un file convertito ti dice poco sulla sua qualità: un AVIF convertito in JPG diventa più grande senza migliorare, perché l'encoder JPG spende più byte descrivendo la stessa immagine già compressa.
Con un'impostazione di qualità intorno ai 90, un singolo passo con perdita extra è molto difficile da vedere nelle foto ordinarie. Le perdite diventano visibili con conversioni ripetute, impostazioni di bassa qualità o immagini con testo fine e spigoli vivi.
Perché won't un AVIF o WebP salvato aperto?
Il programma che lo apre non ha decoder per il formato Un browser corrente mostra l'immagine perché ha negoziato quel formato con il server, ma il file su disco viene quindi consegnato a un software con un elenco di formati più vecchio o più ristretto: una suite per ufficio, un visualizzatore di foto più vecchio, un client di posta elettronica o un modulo di caricamento's allow-list.
Rinominando il file in .jpg non aiuta I byte iniziano ancora con un AVIF ftyp box o un WebP RIFF intestazione, e un programma in attesa di JPEG non trova dati JPEG La conversione del file è la correzione, e vale anche la pena verificare se il sito offre un link di download diretto, che a volte serve il JPG originale o PNG piuttosto che la versione negoziata.
JPG è obsoleto?
No. JPG è obsoleto solo come il formato che un sito web dovrebbe inviare a un browser corrente, e anche lì rimane il fallback in ogni <picture> elemento. Come formato di scambio, per e-mail, moduli, stampa, documenti d'ufficio e qualsiasi cosa diretta al software che non controlli, è comunque l'impostazione predefinita corretta e né AVIF né WebP l'hanno sostituita.
La stessa logica si applica all'altro formato che confonde le persone al di fuori del browser Le foto di iPhone sono HEIC, un fratello di AVIF nello stesso contenitore HEIF, e il confronto di HEIC contro JPG spiega perché quei file non si aprono su Windows Ogni convertitore di immagini è elencato sul hub degli strumenti di immagine.
