Pubblicazione di immagini AVIF

1. Introduzione

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

Che cos'è AVIF?

AVIF è un formato di immagine derivato dal bitstream video AV1. AVIF è stato creato per l'efficienza della compressione.

Perché AVIF?

Le immagini AVIF sono molto più piccole delle immagini JPEG, PNG, GIF o WebP con la stessa o una qualità migliore.

Cosa imparerai a fare

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

Che cosa ti serve

• Qualsiasi browser principale.
• Un editor di testo
• cmake
• git
• ninja
• Un'immagine. Ne ho fornita una qui
• FFmpeg

2. Creare immagini AVIF con Squoosh

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

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

3. Scegli AVIF dalla casella a discesa Compress.

Squoosh comprimerà l'immagine in un'immagine AVIF. Al termine, Squoosh mostrerà un pulsante di download con alcune statistiche sull'immagine AVIF nell'angolo in basso a destra.

L'immagine di esempio originale era di 3340 kB, mentre l'immagine compressa è di 378 kB. L'immagine di esempio è stata compressa di quasi 10 volte rispetto all'immagine originale.

4. Scarica l'immagine AVIF.

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

Puoi visualizzare l'immagine AVIF trascinandola in Chrome.

Ora hai la tua immagine AVIF.

3. Creare l'encoder della riga di comando avifenc

avifenc è un'applicazione della riga di comando che può convertire le immagini PNG e JPEG in immagini AVIF. avifenc utilizza libavif, una libreria in grado di decodificare e codificare le immagini AVIF. Se hai molte immagini da convertire in AVIF, l'utilizzo dell'encoder della riga di comando, avifenc, è probabilmente una buona scelta.

Chrome utilizza libavif per il rendering delle immagini AVIF.

1. Scarica il codice.

git clone https://github.com/AOMediaCodec/libavif.git

2. Cambia directory in libavif.

cd libavif/

Esistono molti modi diversi per configurare la creazione di avifenc e libavif. Puoi trovare ulteriori informazioni su libavif. Creeremo avifenc in modo che sia collegato staticamente alle librerie di elaborazione dell'encoder libaom, del decoder dav1d e di libyuv.

libyuv è importante per velocizzare le prestazioni delle conversioni di colore.

3. Crea lo strumento di codifica della riga di comando, avifenc.

È consigliabile creare una directory di build per avifenc.

mkdir build

Passa alla directory di build.

cd build

Crea i file di build per avifenc.

cmake -DAVIF_CODEC_AOM=LOCAL -DAVIF_CODEC_DAV1D=LOCAL -DAVIF_LIBYUV=LOCAL -DBUILD_SHARED_LIBS=OFF -DAVIF_BUILD_APPS=ON ../

Crea avifenc.

make

Hai creato correttamente avifenc.

4. Creare immagini AVIF con avifenc

1. Crea un'immagine AVIF con le impostazioni predefinite.

I parametri più basilari per l'esecuzione di avifenc sono l'impostazione dei file di input e output.

./avifenc happy_dog.jpg example.avif

Ora hai la tua seconda immagine AVIF.

2. Modificare la qualità della codifica AVIF.

In genere, l'unico parametro che potresti voler modificare nella codifica AVIF è il parametro quality. quality è un parametro che scambia la qualità di un'immagine compressa con le dimensioni del file. Ad esempio, un file di alta qualità (-q 90) sarà molto più grande di un file di bassa qualità (-q 20), ma il file di alta qualità avrà un aspetto molto migliore.

avifenc ha molte opzioni che influiscono sia sulla qualità sia sulla velocità. Se vuoi visualizzare le opzioni e scoprire di più, esegui ./avifenc.

5. Eseguire il rendering delle immagini AVIF in una pagina web.

Ora mostriamo al mondo tutto il tuo duro lavoro.

1. Crea una pagina web per pubblicare l'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 di origine (nel mio caso happy_dog.jpg) e il file AVIF (eaxmple.avif) nella stessa directory di avif_example.html.

Utilizziamo l'elemento picture per eseguire il rendering dell'immagine AVIF se il browser supporta AVIF, con un fallback a JPEG se il browser non lo supporta. Puoi trovare ulteriori informazioni sull'elemento picture 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 sottoposta a rendering in Chrome. Puoi verificare questa operazione facendo clic con il tasto destro del mouse sull'immagine e scegliendo Save image as..., che dovrebbe aprire una finestra di dialogo con example.avif. Un'altra opzione è aprire gli Strumenti per sviluppatori di Chrome e verificare che example.avif sia stato scaricato.

6. Creare immagini AVIF animate con FFmpeg

L'installazione di FFmpeg sul tuo sistema non rientra nell'ambito di questo codelab. Per ulteriori informazioni su come installare FFmpeg sul tuo sistema, consulta la documentazione di FFmpeg.

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

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

1. Crea un'immagine AVIF animata.

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

ffmpeg -i ice_qcif_15fps.y4m animated.avif

Ora hai la tua immagine AVIF animata.

2. Esegui il rendering dell'immagine AVIF animata in una pagina web.

Crea un file denominato avif_animated_example.html.

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

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 di origine (nel caso precedente ice_qcif_15fps.gif) e il file AVIF (animated.avif) nella stessa directory di avif_animated_example.html.

3. 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 AVIF animata dovrebbe essere sottoposta a rendering in Chrome.

Se utilizzi i contenuti multimediali di esempio forniti, dovrebbe avere un aspetto simile a questo:

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..., che dovrebbe aprire una finestra di dialogo con animated.avif. Un'altra opzione è aprire gli Strumenti per sviluppatori di Chrome e verificare che animated.avif sia stato scaricato.

7. Creare immagini AVIF animate con avifenc

1. Converti i contenuti multimediali di origine in 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 sono compressi, quindi possono essere molto grandi.

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

2. Crea un'immagine AVIF animata.

Ho creato un file y4m da utilizzare nel caso in cui non avessi un file multimediale di origine: 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 seconda immagine AVIF animata.

3. Esegui il rendering dell'immagine AVIF animata in una pagina web.

Crea un file denominato avif_animated_example.html.

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

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 di origine (nel caso precedente ice_qcif_15fps.gif) e il file AVIF (animated.avif) nella stessa directory di 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 AVIF animata dovrebbe essere sottoposta a rendering in Chrome.

Se utilizzi i contenuti multimediali di esempio forniti, dovrebbe avere un aspetto simile a questo:

Tranne che con l'AVIF animato, la qualità è molto 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..., che dovrebbe aprire una finestra di dialogo con animated.avif. Un'altra opzione è aprire gli Strumenti per sviluppatori di Chrome e verificare che animated.avif sia stato scaricato.

5. Modificare la qualità della codifica AVIF.

Il file ice_qcif_15fps.gif è circa 7 volte più grande con una qualità molto peggiore. Puoi modificare la qualità di AVIF in modo che corrisponda approssimativamente alla qualità di ice_qcif_15fps.gif modificando il parametro di qualità in 20.

./avifenc -q 20 ice_qcif_15fps.y4m animated.avif

Ora il file AVIF animato e ice_qcif_15fps.gif hanno circa la stessa qualità, ma il file GIF è circa 22 volte più grande.

8. Complimenti!

Hai completato il codelab sulla pubblicazione di immagini AVIF.

Spero che ti sia chiaro come AVIF possa aiutarti a ridurre le dimensioni delle immagini e a renderle più efficienti da trasmettere sul web. Puoi scoprire di più sulle funzionalità di AVIF in un ottimo post di Jake Archibald.