Spesso scriviamo su come le immagini possono appesantire i siti web 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 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 parla degli aggiornamenti recenti agli strumenti open source per AVIF, introduce le librerie di codifica libaom e libavif e include un tutorial sull'utilizzo di queste librerie per codificare in modo efficiente le immagini AVIF.
AVIF è un formato immagine basato sul codec video AV1 e standardizzato dall'Alliance for Open Media. AVIF offre miglioramenti significativi della compressione rispetto ad altri formati di immagini come JPEG e WebP. Sebbene il risparmio esatto dipenda dai contenuti, dalle impostazioni di codifica e dal target di qualità, noi e altri abbiamo registrato un risparmio superiore al 50% rispetto ai file JPEG.
Inoltre, AVIF aggiunge il supporto di codec e contenitori per nuove funzionalità di immagine come High Dynamic Range e Wide Color Gamut, sintesi della grana della pellicola, e decodifica progressiva.
Novità
Da quando è stato implementato il 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, all'incirca nello stesso periodo in cui Chrome ha aggiunto il supporto di AVIF, e la recente release 3.1.0, sono state apportate ottimizzazioni significative alla codifica delle immagini fisse al codebase. Queste includono:
- Ottimizzazioni per il multithreading e la codifica a riquadri.
- Riduzione dell'utilizzo della memoria di 5 volte.
- Riduzione dell'utilizzo della CPU di 6,5 volte, come mostrato nel grafico seguente.
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 creare immagini AVIF continuerà a diminuire.
Libavif
Libavif, l'implementazione di riferimento di AVIF, è un muxer e un 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).
Di recente, libavif ha aggiunto il supporto per una gamma più ampia di impostazioni del codificatore, inclusa l'integrazione con le impostazioni del codificatore libaom più avanzate. Le ottimizzazioni nella pipeline di elaborazione, come la conversione rapida da YUV a RGB utilizzando libyuv e il supporto dell'alpha premoltiplicato, accelerano ulteriormente il processo di decodifica. Infine, il supporto della modalità di codifica all-intra appena aggiunta in libaom 3.1.0 offre tutti i miglioramenti di libaom menzionati sopra.
Codifica delle immagini AVIF con avifenc
Un modo rapido per fare esperimenti con AVIF è Squoosh.app. Lo strumento esegue una versione WebAssembly di libavif e mette a disposizione 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 pensata per le 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 l'encoder a riga di comando avifenc.
Per capire come codificare le immagini AVIF, presenteremo un tutorial utilizzando la stessa immagine di origine utilizzata nell'esempio precedente. Per iniziare, ti serviranno:
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 dell'encoder avifenc a riga di comando
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 la directory in libavif
cd libavif
Esistono molti modi diversi per configurare la compilazione di avifenc e libavif. Puoi trovare ulteriori informazioni su libavif. Compileremo avifenc in modo che sia collegato in modo statico alla libreria di codifica e decodifica AV1, libaom.
3. Ottenere e compilare libaom
Passa alla directory delle dipendenze esterne di libavif.
cd ext
Il comando successivo estrae il codice sorgente di libaom e compila libaom in modo statico.
./aom.cmd
Cambia la directory in libavif.
cd ..
4. Crea lo strumento di codifica a riga di comando avifenc
È consigliabile creare una directory di compilazione per avifenc.
mkdir build
Passa alla directory di compilazione.
cd build
Crea i file di compilazione 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 seguente 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 alpha su 0 |
| --maxalpha 63 | Imposta il quantizzatore massimo per 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 sia per il colore che per l'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 alpha su Q |
| -a tune=ssim | Ottimizzazione per SSIM (il valore predefinito è l'ottimizzazione per PSNR) |
| --jobs J | Utilizza thread di lavoro J (valore predefinito: 1) |
| --speed S | Imposta la velocità del codificatore da 0 a 10 (più lenta-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.
Creare un'immagine AVIF con le impostazioni predefinite
I parametri di base per l'esecuzione di avifenc sono l'impostazione dei file di input e output.
./avifenc happy_dog.jpg happy_dog.avif
Per codificare un'immagine, ad esempio a livello di quantizzazione 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à che sulla velocità.
Se vuoi visualizzare le opzioni e saperne di più, esegui ./avifenc
Ora hai la tua immagine AVIF.
Accelerare il codificatore
Un parametro che può essere utile modificare
a seconda del numero di core della tua macchina è il parametro --jobs.
Questo parametro imposta il numero di thread che avifenc utilizzerà per creare immagini AVIF.
Prova a eseguirlo nella 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, accelerando 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 scegliere come target quando si tratta di elementi LCP candidati che sono immagini.
L'utilizzo di una CDN di immagini è vivamente consigliato per l'ottimizzazione delle immagini, in quanto richiede molto meno impegno rispetto alla configurazione delle pipeline di ottimizzazione delle immagini nella procedura di compilazione del tuo sito web o all'utilizzo manuale dei binari di codifica per ottimizzare le immagini manualmente. Tuttavia, le CDN di immagini potrebbero avere costi proibitivi per alcuni progetti. Se questo è il tuo caso, considera quanto segue durante l'ottimizzazione con l'encoder avifenc:
- Acquisisci familiarità con le opzioni offerte dall'encoder. Puoi risparmiare ulteriormente mantenendo una qualità dell'immagine sufficiente sperimentando alcune delle funzionalità di codifica disponibili di AVIF.
- AVIF offre codifica sia con perdita di dati sia 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 vengono normalmente pubblicate come JPEG avranno probabilmente un rendimento migliore con la codifica con perdita, mentre la codifica senza perdita è probabilmente la migliore per le immagini contenenti dettagli semplici o disegni a linee normalmente pubblicati come PNG.
- Se utilizzi un aggregatore con il supporto della community per imagemin, ti consigliamo di utilizzare il pacchetto imagemin-avif per consentire all'aggregatore di generare varianti di immagini AVIF.
Con esperimenti su AVIF, potresti riuscire a migliorare i tempi LCP del tuo sito web nei casi in cui l'elemento LCP candidato sia 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à delle immagini 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. Per domande, commenti o richieste di funzionalità, contattaci tramite la mailing list av1-discuss, la community GitHub AOM e la wiki AVIF.