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".

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 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 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 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, poiché è stato inizialmente rilasciato nel 2010. I video WebM possono essere molto più piccoli dei video MP4, quindi ha senso generarli entrambi. Fortunatamente, l'elemento <video> ti consente di 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

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. È 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 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 fonti

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 raduni 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. Fin qui tutto 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. Assicurati che la casella di controllo Rendimento sia selezionata nell'elenco Categorie.
  4. Fai clic sul pulsante Genera report.

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