Scriviamo spesso a proposito del gonfiore sui siti web tramite immagini, e strumenti come Lighthouse evidenziano quando il caricamento delle immagini ha un impatto negativo sull'esperienza utente, come l'aumento del tempo di caricamento o l'eliminazione della larghezza di banda da risorse più importanti. Un modo per risolvere questo problema è utilizzare la compressione moderna per ridurre le dimensioni dei file delle immagini. Una nuova opzione per gli sviluppatori web è il formato immagine AVIF. Questo post del blog descrive gli aggiornamenti recenti agli strumenti open source per AVIF, introduce le librerie di codifica libaom e libavif e include un tutorial per usare queste librerie per codificare le immagini AVIF in modo efficiente.
AVIF è un formato di immagine basato sul codec video AV1 e standardizzato dall'Alliance for Open Media. AVIF offre un significativo aumento della compressione rispetto ad altri formati di immagine come JPEG e WebP. Mentre il risparmio esatto dipende dai contenuti, dalle impostazioni di codifica e dal target di qualità, 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, la sintesi della grana della pellicola e la decodifica progressiva.
Novità
Da quando ha ottenuto il supporto AVIF in Chrome M85, il supporto AVIF nell'ecosistema open source è migliorato su diversi fronti.
Libaom
Libaom è un codificatore e decodificatore AV1 open source gestito dalle aziende dell'Alleanza per gli Open Media e utilizzato in molti servizi di produzione di Google e di altre aziende associate. Tra la release libaom 2.0.0 (circa lo stesso periodo in cui Chrome ha aggiunto il supporto AVIF) e la recente versione 3.1.0, sono state aggiunte al codebase alcune ottimizzazioni significative della codifica delle immagini. ad esempio:
- Ottimizzazioni per multi-threading e codifica a mosaico.
- Riduzione di 5 volte dell'utilizzo della memoria.
- Riduzione di 6,5 volte dell'utilizzo della CPU, come mostrato nel grafico seguente.
Queste modifiche riducono notevolmente il costo della codifica AVIF, in particolare le immagini caricate più di frequente sul tuo sito o con la massima priorità. 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 che viene utilizzato in Chrome per decodificare le immagini AVIF. Puoi anche utilizzarla con libaom per creare immagini AVIF da immagini non compresse esistenti o per eseguire la transcodifica da immagini web esistenti (JPEG, PNG e così via).
Di recente Libavif ha aggiunto il supporto per una gamma più ampia di impostazioni del codificatore, compresa l'integrazione con impostazioni più avanzate del codificatore Libaom. Le ottimizzazioni nella pipeline di elaborazione come la conversione rapida da YUV a RGB tramite libyuv e il supporto alpha premoltiplicato velocizzano ulteriormente il processo di decodifica. Infine, il supporto per la modalità di codifica all-intra appena aggiunta a libaom 3.1.0 porta tutti i miglioramenti al libaom menzionati sopra.
Codifica delle immagini AVIF con avifenc
Un modo rapido per sperimentare con AVIF è Squoosh.app. Squoosh esegue una versione WebAssembly di libavif e mostra molte delle stesse funzionalità degli strumenti a riga di comando. È un modo semplice per confrontare AVIF con altri formati, vecchi e nuovi. È disponibile anche una versione CLI di Squoosh per le app Node.
Tuttavia, WebAssembly non ha ancora accesso a tutte le primitive delle prestazioni delle CPU, quindi se vuoi eseguire libavif più velocemente, 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 sopra. Per iniziare ti serviranno:
Dovrai inoltre installare i pacchetti di sviluppo per zlib, libpng e libjpeg. I comandi per le distribuzioni Debian e Ubuntu Linux 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
Dai un'occhiata a un tag di rilascio di libavif.
git clone -b v0.9.1 https://github.com/AOMediaCodec/libavif.git
2. Cambia directory in libavif
cd libavif
Esistono molti modi diversi per configurare avifenc e libavif per la creazione. Puoi trovare maggiori informazioni su libavif. Stiamo per creare avifenc in modo che sia collegato in modo statico alla libreria di codifica e decoder AV1, libaom.
3. Installa e crea libaom
Passa alla directory delle dipendenze esterne libavif.
cd ext
Il prossimo comando estrarrà il codice sorgente Libaom e creerà libaom in modo statico.
./aom.cmd
Cambia la directory in libavif.
cd ..
4. Crea lo strumento di codifica della riga di comando, avifenc
È consigliabile creare una directory di build per avifenc.
mkdir build
Passa alla directory della 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 ..
Costruisci avifenc.
make
Hai costruito avifenc!
Informazioni sui parametri della riga di comando avifenc
avifenc utilizza la seguente struttura a 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 i colori su 63 |
| --minalpha 0 | Imposta il quantizzatore minimo per alfa su 0 |
| --maxalpha 63 | Imposta il quantizzatore massimo per alpha su 63 |
| -a end-usage=q | Imposta la modalità di controllo della frequenza sulla modalità Qualità costante (Q) |
| -a cq-level=Q | Imposta il livello di quantizzazione sia per il colore che per alfa 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 alfa su Q |
| -una melodia=ssim | Sintonizza per SSIM (l'impostazione predefinita è sintonizza per PSNR) |
| --jobs J | Utilizza thread worker J (impostazione predefinita: 1) |
| --speed S | Imposta velocità encoder da 0 a 10 (più lenta, velocità predefinita: 6) |
L'opzione a livello cq imposta il livello di quantizzazione (0-63) per controllare la qualità del colore o alfa.
Crea un'immagine AVIF con impostazioni predefinite
I parametri fondamentali per l'esecuzione di avifenc sono l'impostazione dei file di input e di output.
./avifenc happy_dog.jpg happy_dog.avif
Consigliamo la seguente riga di comando per codificare un'immagine, ad esempio a livello di quantizzazione 18:
./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à che sulla velocità.
Per visualizzare le opzioni e saperne di più, esegui ./avifenc
Ora hai la tua immagine AVIF personale.
Accelerare l'encoder
Un parametro che può essere modificato a seconda di quanti core hai sulla tua macchina è il parametro --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
Questo indica ad avifenc di utilizzare 8 thread durante la creazione dell'immagine AVIF, velocizzando 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 è quello di ottimizzare l'immagine. Riducendo le dimensioni del trasferimento di una risorsa, ne migliori il tempo di caricamento delle risorse, che è una delle quattro fasi principali da scegliere come target quando si gestiscono i candidati LCP che sono immagini.
L'utilizzo di una CDN immagine è vivamente consigliato per l'ottimizzazione delle immagini, poiché richiede molto meno impegno rispetto alla configurazione delle pipeline di ottimizzazione delle immagini nel processo di creazione del tuo sito web o all'uso manuale di programmi binari di codifica per ottimizzare le immagini manualmente. Tuttavia, le CDN immagine potrebbero essere proibitive per alcuni progetti. Se questo è il tuo caso, considera quanto segue durante l'ottimizzazione con il codificatore avifenc:
- Acquisisci familiarità con le opzioni offerte dal codificatore. Puoi ottenere ulteriori risparmi pur mantenendo una qualità dell'immagine sufficiente sperimentando alcune delle funzioni di codifica disponibili di AVIF.
- AVIF fornisce codifica sia senza perdita di dati che senza perdita. In base ai contenuti di un'immagine, un tipo di codifica può avere un rendimento migliore di un altro. Ad esempio, le fotografie che in genere vengono pubblicate come JPEG sono probabilmente più efficaci con una codifica con perdita di dati, mentre la codifica senza perdita di dati è probabilmente migliore per immagini contenenti dettagli semplici o disegni a linee normalmente pubblicati come PNG.
- Se usi un bundler con il supporto della community per imagemin, prendi in considerazione l'utilizzo del pacchetto imagemin-avif per consentire al tuo bundler di produrre varianti dell'immagine AVIF.
Provando con AVIF, potresti riuscire a ottenere un miglioramento dei tempi di LCP del tuo sito web nei casi in cui il candidato LCP sia un'immagine. Per saperne di più sull'ottimizzazione dell'LCP, consulta la guida all'ottimizzazione.
Conclusione
Con libaom, libavif e altri strumenti open source, puoi ottenere le migliori prestazioni e qualità delle immagini per il tuo sito web con AVIF. Il formato è ancora relativamente nuovo e le ottimizzazioni e le integrazioni di strumenti sono ancora in fase di sviluppo. Se hai domande, commenti o richieste di funzionalità, contattaci nella mailing listav1-discuss, la community di GitHub di AOM e il wiki AVIF.