Sostituisci le GIF con un video

Rob Dodson

In questo codelab, migliora le prestazioni sostituendo una GIF animata con un video.

Prima la misurazione

Innanzitutto, misura le prestazioni del sito web:

  1. Per visualizzare l'anteprima del sito, premi Visualizza app, quindi Schermo intero schermo intero.
  2. Premi "Control+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
  3. Fai clic sulla scheda Lighthouse.
  4. Verifica che la casella di controllo Rendimento nell'elenco Categorie sia selezionata.
  5. Fai clic sul pulsante Genera report.

Al termine, dovresti vedere che Lighthouse ha segnalato la GIF come problema nel controllo "Utilizza formati video per contenuti animati".

Ottieni FFmpeg

Esistono diversi modi per convertire le GIF in video; questa guida utilizza FFmpeg. È già installato nella VM Glitch e, se vuoi, puoi seguire queste istruzioni per installarlo sulla tua macchina locale.

Apri la console

Verifica che FFmpeg sia installato e funzionante:

  1. Fai clic su Remix per modificare per rendere il progetto modificabile.
  2. Fai clic su Terminale (nota: se il pulsante Terminale non viene visualizzato, potrebbe essere necessario utilizzare l'opzione Schermo intero).
  3. Nella console, esegui:
which ffmpeg

Dovresti visualizzare il percorso del file:

/usr/bin/ffmpeg

Converti GIF in video

  • Nella console, esegui cd images per accedere alla directory delle immagini.
  • Esegui ls per vederne il contenuto.

Il risultato dovrebbe essere simile a questo:

$ ls
cat-herd.gif
  • Nella console, esegui:
ffmpeg -i cat-herd.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p cat-herd.mp4

Questo indica a FFmpeg di prendere l'input, rappresentato dal flag -i, di cat-herd.gif e di convertirlo in un video chiamato cat-herd.mp4. L'esecuzione dovrebbe richiedere un secondo. Al termine del comando, dovresti essere in grado di digitare di nuovo ls e visualizzare due file:

$ ls
cat-herd.gif  cat-herd.mp4

Crea video WebM

Sebbene il formato MP4 sia disponibile dal 1999, WebM è una novità relativa, uscita inizialmente nel 2010. I video WebM possono essere molto più piccoli rispetto ai video MP4, quindi ha senso generarli entrambi. Per fortuna, l'elemento <video> ti consente di aggiungere più origini. Se un browser non supporta WebM, può usare il formato MP4 di riserva.

  • Nella console, esegui:
ffmpeg -i cat-herd.gif -c vp9 -b:v 0 -crf 41 cat-herd.webm
  • Per verificare le dimensioni dei file eseguite:
ls -lh

Dovresti avere una GIF e due video:

$ ls -lh
total 4.5M
-rw-r--r-- 1 app app 3.7M May 26 00:02 cat-herd.gif
-rw-r--r-- 1 app app 551K May 31 17:45 cat-herd.mp4
-rw-r--r-- 1 app app 341K May 31 17:44 cat-herd.webm

Tieni presente che la GIF originale è di 3, 7 MB, mentre la versione MP4 è da 551 kB e la versione WebM è solo 341 kB. Un risparmio enorme!

Aggiorna il codice HTML per ricreare l'effetto GIF

Le GIF animate hanno tre caratteristiche chiave che i video devono replicare:

  • Vengono riprodotti automaticamente.
  • Riproducono in loop in modo continuo (di solito, ma è possibile evitarli).
  • Sono in silenzio.

Fortunatamente, puoi ricreare questi comportamenti utilizzando l'elemento <video>.

  • Nel file index.html, sostituisci la riga con <img> con:
<img src="/images/cat-herd.gif" alt="Cowboys herding cats.">
<video autoplay loop muted playsinline></video>

Un elemento <video> che utilizza questi attributi viene riprodotto automaticamente, in loop all'infinito, senza audio e in linea (ovvero non a schermo intero), tutti i comportamenti previsti dalle GIF animate. 🎉

Specifica le tue origini

Non ti resta che specificare le origini video. L'elemento <video> richiede uno o più elementi secondari <source> che puntino a file video diversi tra cui il browser può scegliere, a seconda del formato supportato. Aggiorna il campo <video> con gli elementi <source> che rimandano ai video del mandria di gatti:

<video autoplay loop muted playsinline>
  <source src="/images/cat-herd.webm" type="video/webm">
  <source src="/images/cat-herd.mp4" type="video/mp4">
</video>

Anteprima

  • Per visualizzare l'anteprima del sito, premi Visualizza app, quindi Schermo intero schermo intero.

L'esperienza dovrebbe essere la stessa. Stai andando bene.

Verifica con Lighthouse

Con il sito pubblicato aperto:

  1. Premi "Control+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
  2. Fai clic sulla scheda Lighthouse.
  3. Verifica che la casella di controllo Rendimento nell'elenco Categorie sia selezionata.
  4. Fai clic sul pulsante Genera report.

Dovresti notare che il controllo "Utilizza formati video per i contenuti animati" è stato superato. Bene! 💪