Pubblicazione di immagini AVIF

1. Introduzione

Le immagini rappresentano in media più del 60% dei byte necessari per caricare una pagina web. Con AVIF puoi ridurre le dimensioni delle tue immagini e velocizzare il caricamento del tuo sito web.

Che cos'è AVIF?

AVIF è un nuovo formato di immagine derivato dal bitream video AV1. AVIF è stato realizzato per un'efficienza di compressione.

Perché AVIF?

Le immagini in formato AVIF sono molto più piccole delle immagini JPEG, PNG, GIF o WebP con qualità uguale o migliore.

Cosa imparerai a fare

• Come creare immagini AVIF dalle tue immagini
• Come eseguire il rendering di immagini AVIF in una pagina web

Che cosa ti serve

• Chrome 85 o versioni successive
• Un editor di testo
• cmake
• git
• ninja
• Un'immagine. Ne ho fornita una qui
• FFmpeg

2. Creazione di immagini AVIF con Squoosh

Squoosh è un'app web per la compressione delle immagini. Con squoosh puoi comprimere facilmente le tue immagini in immagini AVIF.

1. Apri https://squoosh.app
2. Rilascia un'immagine locale su Squoosh.

3. Scegli AVIF dalla casella a discesa Comprimi.

Squoosh comprimerà quindi la tua immagine in un'immagine AVIF. Una volta creato Squoosh, nell'angolo in basso a destra verrà visualizzato un pulsante di download con alcune statistiche sull'immagine AVIF.

L'immagine di esempio originale era di 3340 kB, mentre l'immagine compressa è di 378 kB. L'immagine di esempio è stata compressa quasi 10 volte più piccola dell'immagine originale.

4. Scarica l'immagine AVIF

Fai clic sul pulsante di download e l'immagine AVIF verrà salvata nell'unità locale.

Puoi visualizzare l'immagine in formato AVIF trascinandola su Chrome.

Ora hai una tua immagine AVIF personalizzata.

3. Building Command Line Encoder avifenc

avifenc è un'applicazione a riga di comando in grado di convertire le immagini PNG e JPEG in immagini AVIF. avifenc utilizza libavif, una libreria in grado di decodificare e codificare immagini AVIF. Se hai molte immagini da convertire in AVIF, l'utilizzo del codificatore a riga di comando, avifenc, è probabilmente una buona scelta.

Chrome utilizza libavif per eseguire il rendering delle immagini AVIF.

1. Richiedi il codice.

git clone 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. Ottieni e crea libaom.

Passa alla directory delle estensioni libavif.

cd ext

Il comando successivo eseguirà il pull del codice sorgente di libaom e creerà il file 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 -DAVIF_LOCAL_AOM=1 -DAVIF_CODEC_AOM=1 -DBUILD_SHARED_LIBS=0 -DAVIF_BUILD_APPS=1 ../

Crea avifenc.

make

Hai creato correttamente avifenc!

4. Creazione di immagini AVIF con avifenc

1. Crea 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 example.avif --min 0 --max 63 -a end-usage=q -a cq-level=32 -a tune=ssim -a deltaq-mode=3 -a sharpness=3 -y 420

"–min 0 –max 63 -a end-usage=q -a cq-level=32 -a tune=ssim -a deltaq-mode=3 -a nitideness=3 -y 420" sono impostazioni consigliate per le immagini 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 la tua seconda immagine in formato AVIF.

2. Stavo accelerando l'encoder.

Un parametro che può essere utile modificare in base al 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 eseguire questa riga di comando.

./avifenc happy_dog.jpg example.avif --jobs 8

Questo indica ad avifenc di utilizzare 8 thread durante la creazione dell'immagine AVIF. Sul mio computer, la codifica AVIF si velocizza di 5 volte.

5. Visualizza le immagini AVIF in una pagina web.

Ora mostriamo al mondo il tuo duro lavoro.

1. Crea una pagina web per pubblicare la tua immagine AVIF.

Crea un file denominato avif_example.html.

Apri avif_example.html nell'editor di testo e digita questo codice:

<html>
  <head>
    <title>AVIF Example</title>
  </head>
  <body>
    <picture>
      <source type="image/avif" srcset="example.avif" />
      <img src="happy_dog.jpg" />
    </picture>
  </body>
</html>

Copia il file sorgente (nel mio caso happy_dog.jpg) e il tuo file AVIF (eaxmple.avif) nella stessa directory in cui si trova avif_example.html.

Stiamo usando l'elemento per eseguire il rendering dell'immagine AVIF se il browser supporta AVIF, con un fallback JPEG in caso contrario. Puoi trovare ulteriori informazioni su qui.

2. Apri la pagina web in Chrome.

Un modo per aprire il file HTML è trascinare avif_example.html in Chrome. Un'altra opzione per aprire il file HTML è pubblicare avif_example.html da un server HTTP.

Ora l'immagine AVIF dovrebbe essere visualizzata in Chrome. Per verificarlo, fai clic con il pulsante destro del mouse sull'immagine e scegli Save image as.... Si aprirà una finestra di dialogo con example.avif. Un'altra opzione è aprire Strumenti per sviluppatori di Chrome e verificare che example.avif sia stato scaricato.

6. Creazione di immagini animate in formato AVIF

1. Converti i contenuti multimediali di origine nel formato y4m.

avifenc supporta y4m come input per creare immagini AVIF animate. Un'ottima opzione per creare file y4m è utilizzare FFmpeg.

I file Y4m non vengono compressi, quindi possono essere molto grandi.

ffmpeg -i input.gif -pix_fmt yuv420p -f yuv4mpegpipe output.y4m

2. Crea un'immagine animata in formato AVIF.

Ho creato un file y4m da utilizzare nel caso in cui tu non avessi un file multimediale sorgente: ice_qcif_15fps.y4m. Il file proviene da Xiph.org Video Test Media.

Esegui questo comando per creare un'immagine AVIF animata da un file y4m.

avifenc ice_qcif_15fps.y4m animated.avif

Ora hai la tua immagine AVIF animata.

3. Visualizza l'immagine animata in formato AVIF in una pagina web.

Crea un file denominato avif_animated_example.html.

Ho creato un file gif da utilizzare nel caso in cui tu non disponga di un file multimediale di origine: ice_qcif_15fps.gif.

Tieni presente che il file GIF è circa 35 volte più grande e di qualità molto peggiore.

Apri avif_animated_example.html nell'editor di testo e digita questo codice:

<html>
  <head>
    <title>Animated AVIF Example</title>
  </head>
  <body>
    <picture>
      <source type="image/avif" srcset="animated.avif" />
      <img src="ice_qcif_15fps.gif" />
    </picture>
  </body>
</html>

Copia il file sorgente (nel caso sopra ice_qcif_15fps.gif) e il file AVIF (animated.avif) nella stessa directory in cui si trova avif_animated_example.html.

4. Apri la pagina web in Chrome.

Un modo per aprire il file HTML è trascinare avif_animated_example.html in Chrome. Un'altra opzione per aprire il file HTML è pubblicare avif_animated_example.html da un server HTTP.

Ora l'immagine animata in formato AVIF dovrebbe essere visualizzata in Chrome.

Se utilizzi i contenuti multimediali di esempio forniti, il codice dovrebbe avere il seguente aspetto:

Tranne che nel formato AVIF animato, la qualità sarà migliore.

Puoi verificare che si tratti di un'immagine AVIF animata facendo clic con il tasto destro del mouse sull'immagine e scegliendo Save image as.... Verrà aperta una finestra di dialogo con animated.avif. Un'altra opzione è aprire Strumenti per sviluppatori di Chrome e verificare che animated.avif sia stato scaricato.

7. Complimenti!

Hai terminato il lab di codice per la pubblicazione delle immagini AVIF.

Speriamo sia chiaro per te come AVIF può aiutarti a rendere le tue immagini più piccole e più efficienti da trasmettere sul web. Per saperne di più sulle funzionalità di AVIF, leggi questo fantastico post di Jake Archibald.