Sostituisci le GIF con un video

Rob Dodson

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

Misura prima

Misura innanzitutto il rendimento del sito web:

  1. Per visualizzare l'anteprima del sito, premi Visualizza app. Quindi premi Schermo intero schermo intero.
  2. Premi "Ctrl+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 contrassegnato la GIF come in "Utilizzare i formati video per i contenuti animati" per la revisione contabile.

Scarica 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 sul tuo locale macchina .

Apri la console

Verifica che FFmpeg sia installato e funzionante:

  1. Fai clic su Remixa per modificare per rendere modificabile il progetto.
  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 ottenere un percorso file:

/usr/bin/ffmpeg

Cambia la GIF in video

  • Nella console, esegui cd images per accedere alla directory delle immagini.
  • Esegui ls per vederne 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, rappresentato dal flag -i, di cat-herd.gif e convertirlo in un video chiamato cat-herd.mp4. L'operazione dovrebbe richiedere secondo per l'esecuzione. Al termine del comando, dovresti essere in grado di digitare di nuovo ls e verranno visualizzati due file:

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

Creare video WebM

Mentre MP4 esiste dal 1999, WebM è relativamente nuovo arrivato dopo essere stato rilasciato inizialmente nel 2010. I video WebM possono essere molto più piccoli dei video MP4, quindi ha senso generarle entrambe. Fortunatamente, l'elemento <video> ti consentirà Aggiungere più origini, quindi se un browser non supporta WebM, può passare a 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

Si noti che la GIF originale è 3.7M, mentre la versione MP4 è 551K e La versione WebM è di soli 341 kB. È un risparmio enorme!

Aggiorna l'HTML per ricreare l'effetto GIF

Le GIF animate hanno tre tratti principali che i video devono replicare:

  • Vengono riprodotti automaticamente.
  • Si loop continuamente (di solito, ma è possibile evitarlo).
  • 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 verrà riprodotto automaticamente, in loop all'infinito, non riproducono audio e riproducono in linea (ovvero non a schermo intero), comportamenti previsti per le GIF animate. 🎉

Specifica le tue fonti

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

L'esperienza dovrebbe essere uguale. Stai andando bene.

Verifica con Lighthouse

Con il sito pubblicato aperto:

  1. Premi "Ctrl+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 visualizzare la sezione "Utilizza formati video per i contenuti animati" Ora il controllo è superato! Bene! 💪