Scriviamo spesso del sovraccarico dei siti web dovuto alle immagini e strumenti come Lighthouse evidenziano quando il caricamento delle immagini ha un impatto negativo sull'esperienza utente, ad esempio aumentando il tempo di caricamento o sottraendo larghezza di banda a risorse più importanti. Un modo per risolvere il problema è utilizzare una compressione moderna per ridurre le dimensioni dei file delle immagini. Una nuova opzione per gli sviluppatori web è il formato dell'immagine AVIF. Questo blog post parla dei recenti aggiornamenti agli strumenti open source per AVIF, introduce le librerie di codifica libaom e libavif e include un tutorial per l'utilizzo di queste librerie per codificare le immagini AVIF in modo efficiente.
AVIF è un formato dell'immagine basato sul codec video AV1 e standardizzato dalla Alliance for Open Media. AVIF offre notevoli vantaggi di compressione rispetto ad altri formati di immagine come JPEG e WebP. Sebbene i risparmi esatti dipendano dai contenuti, dalle impostazioni di codifica e dalla qualità target, noi e altri abbiamo riscontrato un risparmio superiore al 50% rispetto a JPEG.
Inoltre, AVIF aggiunge il supporto di codec e container per nuove funzionalità delle immagini, come High Dynamic Range e Wide Color Gamut, sintesi della grana della pellicola e decodifica progressiva.
Novità
Dall'introduzione del supporto di AVIF in Chrome M85, il supporto di AVIF nell'ecosistema open source è migliorato su diversi fronti.
Libaom
Libaom è un codificatore e decodificatore AV1 open source gestito dalle aziende dell'Alliance for Open Media e utilizzato in molti servizi di produzione di Google e di altre aziende associate. Tra la release di libaom 2.0.0, avvenuta più o meno nello stesso periodo in cui Chrome ha aggiunto il supporto di AVIF, e la recente release 3.1.0, sono state aggiunte al codebase importanti ottimizzazioni della codifica delle immagini statiche. tra cui:
- Ottimizzazioni per il multi-threading e la codifica a riquadri.
- Riduzione di 5 volte della memoria utilizzata.
- Riduzione di 6,5 volte dell'utilizzo della CPU, come mostrato nel grafico di seguito.
Queste modifiche riducono notevolmente il costo della codifica AVIF, in particolare per le immagini caricate più di frequente o con la priorità più alta sul tuo sito. Man mano che la codifica con accelerazione hardware di AV1 diventa più disponibile su server e servizi cloud, il costo per la creazione di immagini AVIF continuerà a diminuire.
Libavif
Libavif, l'implementazione di riferimento di AVIF, è un muxer e parser AVIF open source utilizzato in Chrome per decodificare le immagini AVIF. Può essere utilizzato anche con libaom per creare immagini AVIF dalle immagini non compresse esistenti o per la transcodifica da immagini web esistenti (JPEG, PNG e così via).
Libavif ha recentemente aggiunto il supporto per una gamma più ampia di impostazioni del codificatore, tra cui l'integrazione con impostazioni del codificatore libaom più avanzate. Le ottimizzazioni nella pipeline di elaborazione, come la conversione rapida da YUV a RGB tramite libyuv e il supporto dell'alpha premoltiplicato, velocizzano ulteriormente il processo di decodifica. Infine, il supporto per la modalità di codifica all-intra appena aggiunta in libaom 3.1.0 porta tutti i miglioramenti di libaom menzionati sopra.
Codifica di immagini AVIF con avifenc
Un modo rapido per sperimentare con AVIF è Squoosh.app. Squoosh esegue una versione WebAssembly di libavif ed espone molte delle stesse funzionalità degli strumenti a riga di comando. È un modo semplice per confrontare AVIF con altri formati, vecchi e nuovi. Esiste anche una versione CLI di Squoosh destinata alle app Node.
Tuttavia, WebAssembly non ha ancora accesso a tutte le primitive di prestazioni delle CPU, quindi, se vuoi eseguire libavif alla massima velocità, ti consigliamo il codificatore a riga di comando avifenc.
Per capire come codificare le immagini AVIF, presenteremo un tutorial utilizzando la stessa immagine di origine utilizzata nel nostro esempio precedente. Per iniziare, devi:
Dovrai anche installare i pacchetti di sviluppo per zlib, libpng e libjpeg. I comandi per le distribuzioni Linux Debian e Ubuntu sono:
sudo apt-get install zlib1g-dev
sudo apt-get install libpng-dev
sudo apt-get install libjpeg-dev
Creazione del codificatore a riga di comando avifenc
1. Ottieni il codice
Controlla un tag di release di libavif.
git clone -b v0.9.1 https://github.com/AOMediaCodec/libavif.git
2. Cambia la directory in libavif
cd libavif
Esistono molti modi diversi per configurare avifenc e libavif per la build. Puoi trovare ulteriori informazioni su libavif. Creeremo avifenc in modo che sia collegato staticamente alla libreria di codificatori e decodificatori AV1, libaom.
3. Scarica e crea libaom
Passa alla directory delle dipendenze esterne di libavif.
cd ext
Il comando successivo estrarrà il codice sorgente di libaom e creerà libaom in modo statico.
./aom.cmd
Cambia la directory impostandola su libavif.
cd ..
4. Crea lo strumento di codifica a riga di comando, avifenc
È consigliabile creare una directory di build per avifenc.
mkdir build
Passa alla directory di build.
cd build
Crea i file di build per avifenc.
cmake -DCMAKE_BUILD_TYPE=Release -DBUILD_SHARED_LIBS=0 -DAVIF_CODEC_AOM=1 -DAVIF_LOCAL_AOM=1 -DAVIF_BUILD_APPS=1 ..
Crea avifenc.
make
Hai creato avifenc.
Informazioni sui parametri della riga di comando avifenc
avifenc utilizza la struttura della riga di comando:
./avifenc [options] input.file output.avif
I parametri di base per avifenc utilizzati in questo tutorial sono:
| avifenc | |
|---|---|
| --min 0 | Imposta il quantizzatore minimo per il colore su 0 |
| --max 63 | Imposta il quantizzatore massimo per il colore su 63 |
| --minalpha 0 | Imposta il quantizzatore minimo per l'alpha su 0 |
| --maxalpha 63 | Imposta il quantizzatore massimo per l'alpha su 63 |
| -a end-usage=q | Imposta la modalità di controllo della frequenza su Qualità costante (Q) |
| -a cq-level=Q | Imposta il livello di quantizzazione per il colore e l'alpha su Q |
| -a color:cq-level=Q | Imposta il livello di quantizzazione per il colore su Q |
| -a alpha:cq-level=Q | Imposta il livello di quantizzazione per l'alpha su Q |
| -a tune=ssim | Ottimizza per SSIM (l'impostazione predefinita è l'ottimizzazione per PSNR) |
| --jobs J | Usa J thread di lavoro (valore predefinito: 1) |
| --speed S | Imposta la velocità del codificatore da 0 a 10 (più lento-più veloce. Valore predefinito: 6) |
L'opzione cq-level imposta il livello di quantizzazione (0-63) per controllare la qualità del colore o dell'alpha.
Crea un'immagine AVIF con le impostazioni predefinite
I parametri di base per l'esecuzione di avifenc sono l'impostazione dei file di input e di output.
./avifenc happy_dog.jpg happy_dog.avif
Per codificare un'immagine, ad esempio con un livello di quantizzazione pari a 18, consigliamo la seguente riga di comando:
./avifenc --min 0 --max 63 -a end-usage=q -a cq-level=18 -a tune=ssim happy_dog.jpg happy_dog.avif
Avifenc ha molte opzioni che influiscono sia sulla qualità sia sulla velocità.
Se vuoi visualizzare le opzioni e saperne di più, esegui ./avifenc
Ora hai la tua immagine AVIF.
Velocizzazione del codificatore
Un parametro che potrebbe essere utile modificare a seconda del numero di core della macchina è --jobs.
Questo parametro imposta il numero di thread che avifenc utilizzerà per creare immagini AVIF.
Prova a eseguirlo dalla riga di comando.
./avifenc --min 0 --max 63 -a end-usage=q -a cq-level=18 -a tune=ssim --jobs 8 happy_dog.jpg happy_dog.avif
In questo modo, avifenc utilizza 8 thread durante la creazione dell'immagine AVIF, il che accelera la codifica AVIF di circa 5 volte.
Effetti su Largest Contentful Paint (LCP)
Le immagini sono un candidato comune per la metrica Largest Contentful Paint (LCP). Un consiglio comune per migliorare la velocità di caricamento delle immagini LCP è assicurarsi che un'immagine sia ottimizzata. Riducendo le dimensioni di trasferimento di una risorsa, ne migliori il tempo di caricamento, che è una delle quattro fasi chiave da considerare quando si ha a che fare con candidati LCP che sono immagini.
L'utilizzo di una CDN per immagini è vivamente consigliato per l'ottimizzazione delle immagini, in quanto richiede molto meno impegno rispetto alla configurazione di pipeline di ottimizzazione delle immagini nel processo di creazione del sito web o all'utilizzo manuale di file binari di codifica per ottimizzare le immagini manualmente. Tuttavia, le CDN per immagini potrebbero avere costi proibitivi per alcuni progetti. Se questo è il tuo caso, tieni presente quanto segue quando esegui l'ottimizzazione con l'encoder avifenc:
- Acquisisci familiarità con le opzioni offerte dal codificatore. Potresti ottenere ulteriori risparmi mantenendo una qualità dell'immagine sufficiente sperimentando alcune delle funzionalità di codifica disponibili di AVIF.
- AVIF fornisce la codifica con e senza perdita di dati. A seconda dei contenuti di un'immagine, un tipo di codifica potrebbe avere un rendimento migliore di un altro. Ad esempio, le fotografie che normalmente vengono pubblicate come JPEG probabilmente funzioneranno meglio con la codifica con perdita di dati, mentre la codifica senza perdita di dati è probabilmente la migliore per le immagini contenenti dettagli semplici o disegni al tratto normalmente pubblicati come PNG.
- Se utilizzi un bundler con assistenza dalla community per imagemin, valuta la possibilità di utilizzare il pacchetto imagemin-avif per consentire al bundler di generare varianti di immagini AVIF.
Sperimentando con AVIF, potresti riuscire a migliorare i tempi LCP del tuo sito web nei casi in cui il candidato LCP è un'immagine. Per ulteriori informazioni sull'ottimizzazione dell'LCP, leggi la guida sull'ottimizzazione dell'LCP.
Conclusione
Utilizzando libaom, libavif e altri strumenti open source, puoi ottenere la migliore qualità dell'immagine e le migliori prestazioni per il tuo sito web utilizzando AVIF. Il formato è ancora relativamente nuovo e le ottimizzazioni e le integrazioni degli strumenti sono in fase di sviluppo attivo. In caso di domande, commenti o richieste di funzionalità, contattaci tramite la mailing list av1-discuss, la community GitHub di AOM e il wiki di AVIF.