Pubblicazione di immagini AVIF

1. Introduzione

Le immagini rappresentano più del 60% dei byte necessari in media 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 di compressione.

Perché AVIF?

Le immagini AVIF sono molto più piccole rispetto alle immagini JPEG, PNG, GIF o WebP con la stessa qualità 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

2. Creare immagini AVIF con Squoosh

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

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

Screenshot di Squoosh

  1. Scegli AVIF dalla casella a discesa Comprimi.

Menu a discesa Squoosh

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

Pulsante di download di Squoosh

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

  1. Scarica l'immagine AVIF

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

Ora hai la tua immagine AVIF.

3. Creazione dell'encoder della riga di comando avifenc

avifenc è un'applicazione da 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 che vuoi convertire in AVIF, l'utilizzo del codificatore da riga di comando, avifenc, è probabilmente una buona scelta.

  1. Ottieni il codice.
git clone https://github.com/AOMediaCodec/libavif.git
  1. Passa alla directory libavif.
cd libavif/

Esistono molti modi diversi per configurare avifenc e libavif per la compilazione. Puoi trovare ulteriori informazioni su libavif. Creeremo avifenc in modo che sia collegato staticamente alle librerie di codifica libaom, decodifica dav1d ed elaborazione libyuv.

  1. Crea lo strumento di codifica a riga di comando, avifenc.

È consigliabile creare una directory di compilazione 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 avifenc.

4. Creazione di 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.

  1. Modifica della qualità della codifica AVIF.

In genere, l'unico parametro che potresti voler modificare nella codifica AVIF è 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 avrà un aspetto migliore.

5. Visualizzare le 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.

  1. 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. Puoi testare questa funzionalità 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

  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.

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

Crea un file denominato avif_animated_example.html.

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

  1. 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 visualizzata in Chrome.

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

Pista di pattinaggio animata

Per verificare che si tratti di un'immagine AVIF animata, fai clic con il tasto destro del mouse sull'immagine e scegli 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 nel formato y4m.

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

ffmpeg -i input.gif -pix_fmt yuvj444p -f yuv4mpegpipe output.y4m
  1. Crea un'immagine AVIF animata.

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.

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

Crea un file denominato avif_animated_example.html.

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

  1. 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 visualizzata in Chrome.

Se utilizzi i contenuti multimediali di esempio forniti, dovrebbe essere simile a questo:

Pista di pattinaggio animata

Per verificare che si tratti di un'immagine AVIF animata, fai clic con il tasto destro del mouse sull'immagine e scegli 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.

  1. Modifica della qualità della codifica AVIF.

Il file ice_qcif_15fps.gif è circa 7 volte più grande e di qualità molto inferiore. Puoi modificare la qualità di AVIF in modo che corrisponda approssimativamente a quella 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 lab di codici per la pubblicazione di immagini AVIF.

Spero che ora sia chiaro come AVIF possa aiutarti a ridurre le dimensioni delle immagini e a trasmetterle in modo più efficiente sul web. Puoi scoprire di più sulle funzionalità di AVIF in un ottimo post di Jake Archibald.