Sostituisci le GIF con un video

Rob Dodson

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

Misura prima

Innanzitutto, misura il rendimento del sito web:

  1. Per visualizzare l'anteprima del sito, premi Visualizza app, quindi premi A 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. Assicurati che la casella di controllo Rendimento sia selezionata nell'elenco Categorie.
  5. Fai clic sul pulsante Genera report.

Al termine, dovresti vedere che Lighthouse ha segnalato la GIF come problema nell'audit "Utilizza formati video per i contenuti animati".

Ottenere 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 anche sulla tua macchina locale.

Apri la console

Verifica che FFmpeg sia installato e funzioni:

  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, potresti dover utilizzare l'opzione Schermo intero).
  3. Nella console, esegui:
which ffmpeg

Dovresti ricevere un percorso file:

/usr/bin/ffmpeg

Passare da GIF a video

  • Nella console, esegui cd images per accedere alla directory delle immagini.
  • Esegui ls per visualizzare i contenuti.

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, indicato 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

Creare video WebM

Mentre il formato MP4 è disponibile dal 1999, il formato WebM è relativamente nuovo, dato che è stato inizialmente rilasciato nel 2010. I video WebM possono essere molto più piccoli dei video MP4, quindi è consigliabile generarli entrambi. Fortunatamente, l'elemento <video> ti consente di aggiungere più origini, quindi se un browser non supporta WebM, può utilizzare come alternativa MP4.

  • Nella console, esegui:
ffmpeg -i cat-herd.gif -c vp9 -b:v 0 -crf 41 cat-herd.webm
  • Per controllare le dimensioni dei file, esegui:
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 è di 551 KB e la versione WebM è di soli 341 KB. Si tratta di un risparmio enorme.

Aggiornare 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 continuamente (di solito, ma è possibile impedirlo).
  • Sono silenziosi.

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 verrà riprodotto automaticamente, in loop infinito, senza audio e in linea (ovvero non a schermo intero), tutti i comportamenti previsti per le GIF animate. 🎉

Specifica le origini

Non ti resta che specificare le sorgenti video. L'elemento <video> richiede uno o più elementi secondari <source> che rimandino a diversi file video tra cui il browser può scegliere, a seconda del supporto del formato. Aggiorna <video> con gli elementi <source> che rimandano ai tuoi video di branchi 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 premi A schermo intero schermo intero.

L'esperienza dovrebbe essere la stessa. Fin qui tutto bene.

Verifica con Lighthouse

Con il sito pubblicato:

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

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