Un aggiornamento sull'adozione di AVIF nell'ecosistema.
AVIF è un nuovo formato dell'immagine che sta rapidamente guadagnando popolarità sul web grazie ai suoi tassi di compressione elevati, alle prestazioni efficienti e all'ampia adozione. AVIF è un formato immagine aperto e senza royalty basato sul codec video AV1 standardizzato dall'Alliance for Open Media. Questo blog post fornirà una panoramica di come AVIF viene adottato nell'ecosistema e del tipo di vantaggi in termini di prestazioni e qualità che gli sviluppatori possono aspettarsi da AVIF per immagini statiche e animazioni.
Quali sono le novità dell'ecosistema AVIF?
Dall'introduzione di AVIF in Chrome, Firefox e Safari, l'utilizzo di AVIF sul web è cresciuto costantemente; quasi tutti i browser supportano AVIF oggi.
Solo in Chrome, l'utilizzo di AVIF è cresciuto fino a circa l'1% in poco più di un anno dopo che Chrome ha aggiunto il supporto di AVIF nella versione stabile.
Oggi diverse CDN di immagini, come Akamai, Cloudflare, Cloudinary e Imgix, pubblicano immagini AVIF. In un blog post che annunciava il supporto di AVIF, Imgix ha segnalato un risparmio del 60% sulle dimensioni dei file rispetto a JPEG e del 35% rispetto a WebP. Queste riduzioni delle dimensioni dei file comportano un notevole risparmio di spazio di archiviazione, ma aiutano anche le pagine a caricarsi più velocemente, con tempi di Largest Contentful Paint (LCP) più rapidi. LCP è uno dei Core Web Vitals e rappresenta la velocità di caricamento del blocco di contenuti più grande della pagina. L'utilizzo di codec moderni per comprimere le immagini è una delle tecniche chiave per ridurre l'LCP. Lighthouse è un ottimo strumento per sviluppatori di Chrome per testare il tuo sito web e vedere quanto risparmio porterebbe AVIF.
WordPress è la piattaforma per siti web più popolare al mondo e sono disponibili diversi plug-in che gli sviluppatori possono utilizzare per convertire le immagini in AVIF, ad esempio:
Per gli sviluppatori più esperti, strumenti come ImageMagick e FFmpeg sono un buon punto di partenza.
Velocità di codifica AVIF
La velocità di codifica e l'alta qualità visiva sono fondamentali per implementare la compressione delle immagini su larga scala. La velocità di codifica del software AVIF è migliorata in modo significativo negli ultimi due anni. Rispetto ad altri formati di immagini fisse moderni, AVIF produce file più piccoli con una qualità visiva simile (vedi il grafico seguente, più basso è meglio), ma è anche più veloce da codificare.
Il grafico seguente (più alto è, meglio è) illustra il confronto tra la velocità di codifica AVIF e altri formati dell'immagine. I codec di generazione precedente come WebP traggono vantaggio dagli algoritmi di compressione meno complessi (ma anche meno efficienti). Con uno schema di codifica multi-thread, AVIF ottiene prestazioni simili per i casi d'uso comuni, offrendo al contempo significativi vantaggi di compressione.
Per gli sviluppatori interessati a confronti più dettagliati sulla velocità di codifica e sulla qualità visiva, il sito Image Coding Comparisons contiene risultati di benchmark riproducibili.
Sebbene le implementazioni software per i codec di immagini moderni come AVIF e WebP siano ottimizzate per le architetture dei processori x86 e ARM, la compressione di grandi quantità di immagini su larga scala può essere costosa dal punto di vista computazionale. Un'alternativa per ridurre i costi di compressione è esplorare l'accelerazione hardware. Bluedot ha sviluppato un codificatore Pulsar-AVIF con accelerazione hardware in esecuzione su FPGA programmabili, come Alveo U250 di AMD. Rispetto ad avifenc basato su software, Pulsar-AVIF offre un miglioramento della velocità da 7 a 23 volte con un'efficienza di compressione simile.
- Set di test: Kodak (24 immagini di 768 x 512)
- Codifica di 24 immagini contemporaneamente (24 processi)
- Ogni processo di codifica software viene eseguito con 4 thread. (-j 4)
Gli sviluppatori possono eseguire il deployment del codificatore Pulsar-AVIF con macchine virtuali cloud, come Azure NP-Series.
Funzionalità AVIF per pagine web adattabili
AVIF ha alcune funzionalità interessanti che aiuteranno a fornire pagine web più adattabili. Questa volta approfondiremo un po' gli AVIF animati, che sono di gran lunga il modo più efficiente per pubblicare animazioni accattivanti sul web.
AVIF animato
Le GIF animate sono ancora un formato popolare per le immagini animate, nonostante abbiano 35 anni. I principali svantaggi delle GIF animate sono il supporto di soli 256 colori e la scarsa compressione, che comporta dimensioni dei file molto grandi, limitando al contempo la risoluzione o la frequenza fotogrammi per i casi d'uso pratici. Al contrario, la codifica AVIF animata è in realtà la stessa dello schema di codifica video AV1, che consente di risparmiare notevolmente sulle dimensioni dei file rispetto alle GIF animate.
Abbiamo eseguito un semplice benchmark in cui abbiamo codificato un insieme di GIF animate sia in AVIF che in JPEG XL. Nel set di test, la percentuale mediana di risparmio sulle dimensioni dei file è stata di circa l'86% rispetto ai file GIF originali e di circa il 73% rispetto ai file JPEG XL animati.*
Chrome, Firefox e Safari supportano tutte le riproduzioni AVIF animate.
FFmpeg è uno strumento da utilizzare per creare file AVIF animati. Ecco un esempio di base di conversione di una GIF in AVIF utilizzando FFmpeg:
ffmpeg -i "$INPUT_GIF" -crf $CRF -b:v 0 "$OUTPUT.avif"
$CRF è la qualità dell'output desiderata su una scala da 0 a 63. Valori più bassi indicano una qualità migliore e dimensioni del file maggiori. 0 utilizza la compressione lossless. Inizia con un valore di 23 per i file AVIF animati di piccole dimensioni.
FFmpeg utilizza libaom per impostazione predefinita per la codifica delle immagini AVIF, ma può anche utilizzare rav1e o SVT-AV1, se disponibili. Per saperne di più sulle scelte dei codificatori e sulla regolazione dei parametri di codifica per i compromessi tra velocità e qualità, consulta la guida alla codifica AV1 di FFmpeg.
Un altro caso d'uso è il repackaging di un video AV1 in AVIF senza ricodificare il file originale. Questo è molto più economico rispetto alla decodifica/codifica del file AV1 originale e rende il video AV1 disponibile per l'utilizzo con l'elemento <img>. Per farlo, puoi passare -c:v copy a FFmpeg.
ffmpeg -i "$INPUT_AV1_VIDEO" -c:v copy -an "$OUTPUT.avif"
Conclusioni
L'utilizzo di AVIF sul web è in costante aumento dal lancio ed è ampiamente supportato da browser, CDN di immagini, plug-in WordPress e strumenti di codifica. In sintesi, AVIF è un'ottima scelta per la pubblicazione di immagini sul web; AVIF è veloce da codificare e decodificare, offrendo al contempo la migliore qualità o le dimensioni del file più piccole, a seconda di ciò che preferisci per il tuo sito web. AVIF è il modo più efficiente per pubblicare animazioni sul web. In caso di domande, commenti o richieste di funzionalità, contattaci tramite la mailing list av1-discuss, la community di GitHub di AOM e il wiki di AVIF.