Scriviamo spesso del problema che si verifica nei siti web con le immagini; strumenti come Lighthouse evidenziano quando il caricamento delle immagini ha un impatto negativo sull'esperienza utente, ad esempio un aumento del tempo di caricamento o l'eliminazione di 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 e una nuova opzione per gli sviluppatori web è il formato dell'immagine AVIF. Questo blog post illustra gli ultimi aggiornamenti 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 le immagini AVIF in modo efficiente.
AVIF è un formato di immagine basato sul codec video AV1 e standardizzato da Alliance for Open Media. AVIF offre notevoli guadagni di compressione rispetto ad altri formati di immagine, come JPEG e WebP. Sebbene il risparmio esatto dipenderà dai contenuti, dalle impostazioni di codifica e dal target di qualità, noi e altri hanno riscontrato un risparmio superiore al 50% rispetto a JPEG.
Inoltre, AVIF aggiunge il supporto 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à
Da quando è stato introdotto il supporto AVIF in Chrome M85, nell'ecosistema open source è migliorato il supporto di AVIF su diversi fronti.
Libia
Libaom è un encoder e decoder AV1 open source gestito dalle società dell'Alleanza per i media aperti e utilizzato in molti servizi di produzione di Google e di altre società associate. Tra la release libaom 2.0.0, all'incirca nello stesso periodo in cui Chrome ha aggiunto il supporto AVIF, e la recente release 3.1.0, sono state aggiunte al codebase importanti ottimizzazioni della codifica delle immagini statiche. Questi includono:
- Ottimizzazioni per la codifica multi-thread e la codifica a riquadri.
- Riduzione di 5 volte della memoria utilizzata.
- Riduzione di 6,5 volte nell'utilizzo della CPU, come mostrato nel grafico seguente.
Queste modifiche riducono enormemente i costi di codifica del file AVIF, in particolare le immagini caricate più di frequente o con la massima priorità sul tuo sito. Man mano che la codifica con accelerazione hardware di AV1 diventerà sempre 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 un parser open source AVIF utilizzato in Chrome per decodificare le immagini AVIF. Può essere utilizzato anche con libaom per creare immagini AVIF a partire da immagini non compresse esistenti o per 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, compresa 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 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 offre 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 e espone molte delle 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 mirata alle app Node.
Tuttavia, WebAssembly non ha ancora accesso a tutte le primitive delle prestazioni delle CPU, quindi se vuoi eseguire libavif al massimo della 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 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
Building Command Line Encoder avifenc
1. Ottieni il codice
Dai un'occhiata al tag 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 creazione. Puoi trovare ulteriori informazioni all'indirizzo libavif. Creeremo avifenc in modo che sia collegato staticamente alla libreria encoder e decoder AV1, libaom.
3. Scarica e crea libaom
Passa alla directory delle dipendenze esterne libavif.
cd ext
Il comando successivo estrarrà il codice sorgente di libaom e lo creerà in modo statico.
./aom.cmd
Cambia la directory in libavif.
cd ..
4. Creare lo strumento di codifica a riga di comando, avifenc
È una buona idea creare una directory di compilazione 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 correttamente avifenc!
Comprensione dei parametri della riga di comando avifenc
avifenc utilizza la 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 il colore su 63 |
| --minalpha 0 | Imposta il quantizzatore minimo per alfa su 0 |
| --maxalpha 63 | Imposta il quantizzatore massimo per alfa su 63 |
| -a end-usage=q | Imposta la modalità di controllo della frequenza sulla modalità di qualità costante (Q) |
| -a cq-level=Q | Imposta il livello di quantizzazione sia per il colore che per alpha a 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 da alpha a Q |
| -a melodia=ssim | Ottimizza per SSIM (l'impostazione predefinita è l'ottimizzazione per PSNR) |
| --jobs J | Usa thread worker J (impostazione predefinita: 1) |
| --velocità S | Imposta la velocità dell'encoder da 0 a 10 (più lento, valore predefinito: 6) |
L'opzione cq-level consente di impostare il livello di quantizzazione (da 0 a 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
Per codificare un'immagine, consigliamo la seguente riga di comando, ad esempio al 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 offre molte opzioni che incidono sia sulla qualità che sulla velocità.
Se vuoi vedere le opzioni e scoprire di più al riguardo, esegui ./avifenc
Ora hai una tua immagine AVIF personalizzata.
Accelerazione dell'encoder
Un parametro che può essere opportuno modificare
a seconda del numero di core presenti sulla macchina è il parametro --jobs.
Questo parametro imposta il numero di thread che avifenc utilizzerà per creare immagini AVIF.
Prova a eseguirla 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, che accelera la codifica AVIF di circa 5 volte.
Effetti sulla visualizzazione più grande con contenuti (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 del trasferimento di una risorsa, ne migliori il tempo di caricamento, che è una delle quattro fasi chiave da scegliere come target quando hai a che fare con i candidati LCP che sono immagini.
L'utilizzo di una CDN di immagini è vivamente consigliato quando si ottimizza le immagini, in quanto richiede molto meno sforzo rispetto alla configurazione delle pipeline di ottimizzazione delle immagini nel processo di compilazione del tuo sito web o all'utilizzo manuale di programmi binari del codificatore per ottimizzare le immagini a mano. Tuttavia, le CDN di immagini potrebbero essere proibitive in termini di costi per alcuni progetti. Se questo è il tuo caso, considera quanto segue durante l'ottimizzazione con l'encoder avifenc:
- Acquisisci familiarità con le opzioni offerte dal codificatore. Potresti trovare ulteriori risparmi pur mantenendo una qualità dell'immagine sufficiente sperimentando alcune delle funzioni di codifica disponibili di AVIF.
- AVIF offre una codifica sia lossy che lossless. A seconda dei contenuti di un'immagine, un tipo di codifica può avere prestazioni migliori di un altro. Ad esempio, le fotografie che vengono normalmente pubblicate come JPEG sono probabilmente più efficaci con la codifica con perdita di dati, mentre la codifica senza perdita di dati è probabilmente l'ideale per immagini contenenti dettagli semplici o elementi grafici normalmente pubblicati come PNG.
- Se utilizzi un bundler che supporta imagemin dalla community, potresti utilizzare il pacchetto imagemin-avif per consentire al bundler di produrre varianti di immagine AVIF.
Sperimentando con AVIF, potresti riuscire a ottenere un miglioramento dei tempi LCP del tuo sito web nei casi in cui il candidato LCP sia un'immagine. Per ulteriori informazioni sull'ottimizzazione di LCP, leggi la guida all'ottimizzazione di LCP.
Conclusione
Utilizzando libaom, libavif e altri strumenti open source, puoi ottenere le migliori prestazioni e qualità delle immagini per il tuo sito web utilizzando AVIF. Il formato è ancora relativamente nuovo e ottimizzazioni e integrazioni degli strumenti sono in fase di sviluppo. Per domande, commenti o richieste di funzionalità, contatta la mailing list av1-discuss, la community AOM GitHub e il wiki AVIF.