Un aggiornamento sull'adozione di AVIF nell'ecosistema.
AVIF è un nuovo formato di immagine che sta rapidamente guadagnando popolarità sul web grazie ai suoi elevati tassi di compressione, alle prestazioni efficienti e all'ampia adozione. AVIF è un formato di immagine aperto ed esente da royalty basato sul codec video AV1 standardizzato da Alliance for Open Media. In questo blog post verrà fornita una panoramica di come AVIF viene adottato nell'ecosistema e dei 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 questo formato sul web è cresciuto costantemente. Quasi tutti i browser supportano oggi AVIF.
Solo in Chrome, l'utilizzo di AVIF è aumentato fino a circa l'1% in poco più di un anno dopo che Chrome ha aggiunto il supporto di AVIF nella versione stabile.
Diverse CDN di immagini, come Akamai, Cloudflare, Cloudinary e Imgix, pubblicano oggi immagini AVIF. In un post del blog in cui annunciava il supporto di AVIF, Imgix ha registrato un risparmio delle dimensioni dei file del 60% rispetto a JPEG e del 35% rispetto a WebP. Questi risparmi sulle dimensioni dei file comportano un notevole risparmio di spazio di archiviazione, ma contribuiscono anche a velocizzare il caricamento delle pagine, con tempi di Largest Contentful Paint (LCP) inferiori. LCP è una delle metriche Core Web Vitals e indica 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 il LCP. Lighthouse è un ottimo strumento per sviluppatori di Chrome per testare il tuo sito web e scoprire quanti risparmi potrebbero essere apportati da AVIF.
WordPress è la piattaforma per siti web più utilizzata al mondo e sono disponibili diversi plug-in per consentire agli sviluppatori di convertire le immagini in AVIF, ad esempio:
Per gli sviluppatori più pratici, strumenti come ImageMagick e FFmpeg sono un buon punto di partenza.
Velocità di codifica AVIF
La velocità di codifica elevata e l'alta qualità visiva sono fondamentali per implementare la compressione delle immagini su larga scala. La velocità di codifica del software AVIF è migliorata notevolmente 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 di seguito (più alto è meglio) mostra la velocità di codifica AVIF rispetto ad altri formati di immagine. I codec di generazione precedente come WebP beneficiano di algoritmi di compressione meno complessi (ma anche meno efficienti). Con uno schema di codifica multithread, AVIF offre prestazioni simili per i casi d'uso comuni, garantendo al contempo miglioramenti significativi della compressione.
Per gli sviluppatori interessati a confronti più dettagliati della velocità di codifica e della qualità visiva, il sito Image Coding Comparisons (Confronti di codifica delle immagini) contiene risultati di benchmark riproducibili.
Sebbene le implementazioni software per i codec immagine 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 computazionalmente dispendiosa. 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 del software viene eseguito con 4 thread. (-j 4)
Gli sviluppatori possono eseguire il deployment dell'encoder Pulsar-AVIF con macchine virtuali cloud, come Azure NP-Series.
Funzionalità AVIF per le pagine web responsive
AVIF ha alcune funzionalità interessanti che ti aiuteranno a offrire pagine web più reattive. Questa volta parleremo un po' degli AVIF animati, che sono di gran lunga il modo più efficiente per pubblicare animazioni fantastiche sul web.
AVIF animato
Le GIF animate sono ancora un formato popolare per le immagini animate, nonostante siano state inventate 35 anni fa. I maggiori svantaggi delle GIF animate sono il supporto di soli 256 colori e la scarsa compressione che porta a dimensioni dei file molto grandi, limitando al contempo la risoluzione o la frequenza dei 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 risparmi significativi sulle dimensioni dei file rispetto alle GIF animate.
Abbiamo eseguito un semplice benchmark in cui abbiamo codificato un insieme di GIF animate in AVIF e JPEG XL. Nel set di test, la percentuale media di risparmio delle 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 tutti la riproduzione di file AVIF animati.
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 dei file maggiori. 0 utilizza la compressione senza perdita. Inizia con il valore 23 per i file AVIF animati di piccole dimensioni.
Per impostazione predefinita, FFmpeg utilizza libaom per la codifica delle immagini AVIF, ma può anche utilizzare rav1e o SVT-AV1, se disponibili. Ulteriori informazioni sulle scelte del codificatore e sull'ottimizzazione dei parametri di codifica per compromessi velocità/qualità sono disponibili nella guida alla codifica AV1 di FFmpeg.
Un altro caso d'uso è quello di rielaborare un video AV1 in AVIF senza ricodificare il file originale. Questa operazione è molto più economica della decodifica/codifica del file AV1 originale e rende il video AV1 disponibile per l'utilizzo con l'elemento <img>. Puoi farlo passando -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 è veloce da codificare e decodificare e, al contempo, offre la migliore qualità o dimensioni di file ridotte, a seconda di quale opzione preferisci per il tuo sito web. AVIF è il modo più efficiente per pubblicare animazioni sul web. Per domande, commenti o richieste di funzionalità, contatta la mailing list av1-discuss, la community AOM GitHub e il wiki AVIF.