Un aggiornamento sull'adozione di AVIF nell'ecosistema.
AVIF è un nuovo formato di immagini che sta guadagnando rapidamente popolarità sul web grazie ai suoi elevati tassi di compressione, alle sue prestazioni efficienti e alla sua ampia adozione. AVIF è un formato di immagini aperto, esente da royalty, basato sul codec video AV1 standardizzato dall'Alliance for Open Media. Questo post del blog fornisce una panoramica sull'adozione di AVIF nell'ecosistema e sui vantaggi in termini di prestazioni e qualità che gli sviluppatori possono aspettarsi per le immagini statiche e le animazioni.
Quali sono le novità dell'ecosistema AVIF?
Dall'introduzione di AVIF in Chrome, Firefox e Safari, l'utilizzo di AVIF sul web è aumentato costantemente e quasi tutti i browser attualmente supportano AVIF.
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.
Attualmente, diverse reti CDN immagine, come Akamai, Cloudflare, Cloudinary e Imgix, pubblicano immagini AVIF. In un post del blog in cui annunciava il supporto di AVIF, Imgix ha riportato un risparmio del 60% nelle dimensioni dei file rispetto a JPEG e del 35% rispetto a WebP. Queste dimensioni dei file consentono un notevole risparmio di spazio di archiviazione, ma anche un caricamento più rapido delle pagine, con tempi di elaborazione più rapidi per Largest Contentful Paint (LCP). Il valore LCP è uno dei Segnali web essenziali e rappresenta la velocità di caricamento del blocco di contenuti più grande sulla pagina. L'utilizzo di codec moderni per comprimere le immagini è una delle tecniche chiave per ridurre la LCP. Lighthouse è un ottimo strumento per sviluppatori di Chrome per testare il tuo sito web e scoprire quanto risparmi AVIF potrebbe offrire.
WordPress è la piattaforma di siti web più popolare al mondo e offre agli sviluppatori diversi plug-in per convertire le loro immagini in AVIF, ad esempio:
- AutoOptimize
- Convertito per media
- Ottimizzatore di immagini EWWW
- Ottimolo
- Ottimizzatore di immagini ShortsPixel
Per gli sviluppatori più esperti, strumenti come ImageMagick e FFmpeg sono un buon punto di partenza.
Velocità di codifica AVIF
Una velocità di codifica elevata e una qualità visiva elevata 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 statiche moderne, AVIF produce file più piccoli con una qualità visiva simile (vedi il grafico seguente, il grafico in basso è meglio), ma è anche più veloce da codificare.
Il grafico qui sotto (maggiore, meglio è) illustra il confronto tra la velocità di codifica AVIF e quella di altri formati di immagine. I codec della 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 casi d'uso comuni, offrendo al contempo notevoli guadagni di compressione.
Per gli sviluppatori interessati a confronti più dettagliati in merito alla velocità di codifica e a confronti della qualità visiva, il sito Image Coding Comparisons contiene risultati di benchmark riproducibili.
Mentre le implementazioni software per i moderni codec di immagini come AVIF e WebP sono ottimizzate per le architetture dei processori x86 e ARM, comprimere grandi quantità di immagini su larga scala può essere costoso dal punto di vista del calcolo. 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 all'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 del 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 le pagine web adattabili
AVIF dispone di alcune funzioni interessanti che permettono di rendere più reattive le pagine web. Questa volta parleremo di AVIF animati, che sono di gran lunga il modo più efficiente per offrire animazioni fantastiche sul web.
AVIF animato
Il formato GIF animato è ancora un formato popolare per le immagini animate, nonostante abbia 35 anni. I principali svantaggi delle GIF animate sono il supporto di soli 256 colori e una scarsa compressione che porta a dimensioni dei file molto grandi, limitando al contempo la risoluzione o la frequenza fotogrammi per casi d'uso pratici. Al contrario, la codifica animata AVIF è di fatto la stessa dello schema di codifica video AV1 che fornisce un significativo risparmio in termini di dimensioni dei file rispetto alla GIF animata.
Abbiamo eseguito un semplice benchmark in cui abbiamo codificato un set di GIF animate sia in AVIF che in JPEG XL. Nel test, la percentuale mediana di risparmio nelle 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; di seguito è riportato un esempio base di conversione di una GIF in AVIF mediante FFmpeg:
ffmpeg -i "$INPUT_GIF" -crf $CRF -b:v 0 "$OUTPUT.avif"
$CRF è la qualità di output desiderata su una scala da 0 a 63. Valori più bassi indicano una qualità migliore e una dimensione dei file maggiore. 0 utilizza la compressione senza perdita di dati. Inizia con un valore di 23 per i piccoli file AVIF animati.
FFmpeg utilizza libaom per impostazione predefinita per la codifica delle immagini AVIF, ma può anche utilizzare rav1e o SVT-AV1 se disponibile. Per ulteriori informazioni sulle scelte del codificatore e sull'ottimizzazione dei parametri di codifica per compromessi velocità/qualità, consulta la guida alla codifica AV1 di FFmpeg.
Un altro caso d'uso consiste nel riadattare un video AV1 in formato AVIF senza dover ricodificare il file originale. Questa opzione è notevolmente più economica rispetto alla decodifica/codifica del file AV1 originale e rende il video AV1 disponibile per l'utilizzo con l'elemento <img>. Per farlo, trasmetti -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. Nel complesso, AVIF è un'ottima scelta per la pubblicazione di immagini sul Web. AVIF si codifica e decodifica rapidamente, offrendo la migliore qualità o la dimensione più piccola delle dimensioni dei file, a seconda di quale delle due opzioni preferisci per il tuo sito web. AVIF è il modo più efficiente per pubblicare animazioni sul web. Per eventuali domande, commenti o richieste di funzionalità, contattaci tramite la mailing list av1-discuss, la community AOM GitHub e il wiki AVIF.