Scriviamo di frequente delle immagini gonfie sui siti web; 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 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 di immagine basato sul codec video AV1 e standardizzato da 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 introdotto il supporto AVIF in Chrome M85, nell'ecosistema open source è migliorato il supporto di AVIF 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 di 6,5 volte nell'utilizzo della CPU, 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 per la 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 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. Esiste anche una versione CLI di Squoosh pensata per le 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
Creazione dell'encoder 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 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. Scarica e crea 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
È una buona idea creare una directory di build per avifenc.
mkdir build
Passa alla directory di compilazione.
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 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 colore che per alfa 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 per alpha to Q |
| -a melodia=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 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, 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 eseguire questo comando 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 siano ottimizzate. 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 sito web o all'utilizzo manuale dei binari di codifica per ottimizzare manualmente le immagini. Tuttavia, le CDN di immagini potrebbero avere costi proibitivi per alcuni progetti. Se questo è il tuo caso, considera quanto segue durante l'ottimizzazione con il codificatore 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 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.
Se esegui esperimenti con 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
Con 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.