Remplacer les GIF par des vidéos

Rob Dodson

Dans cet atelier de programmation, vous allez améliorer les performances en remplaçant un GIF animé par un vidéo.

Mesurer d'abord

Commencez par évaluer les performances du site Web:

  1. Pour prévisualiser le site, appuyez sur Afficher l'application. Appuyez ensuite sur Plein écran plein écran
  2. Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir les outils de développement.
  3. Cliquez sur l'onglet Lighthouse.
  4. Assurez-vous que la case Performances est cochée dans la liste Catégories.
  5. Cliquez sur le bouton Générer un rapport.

Lorsque vous avez terminé, vous devriez voir que Lighthouse a signalé le GIF comme étant dans la section "Utiliser des formats vidéo pour le contenu animé" audit.

Télécharger FFmpeg

Il existe plusieurs façons de convertir des GIF en vidéo : ce guide utilise FFmpeg : Il est déjà installé dans la VM Glitch, et, si vous le souhaitez, vous pouvez suivre ces instructions pour l'installer sur votre local machine .

Ouvrir la console

Vérifiez que FFmpeg est installé et fonctionne:

  1. Cliquez sur Remix to Edit (Remixer pour modifier) pour pouvoir modifier le projet.
  2. Cliquez sur Terminal (remarque: si le bouton Terminal ne s'affiche pas, vous devrez peut-être utiliser l'option plein écran).
  3. Dans la console, exécutez la commande suivante:
which ffmpeg

Vous devriez obtenir un chemin d'accès au fichier:

/usr/bin/ffmpeg

Convertir le GIF en vidéo

  • Dans la console, exécutez cd images pour accéder au répertoire des images.
  • Exécutez ls pour afficher le contenu.

L'écran qui s'affiche devrait ressembler à ce qui suit :

$ ls
cat-herd.gif
  • Dans la console, exécutez la commande suivante:
ffmpeg -i cat-herd.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p cat-herd.mp4

Cela indique à FFmpeg de récupérer l'entrée, indiquée par l'indicateur -i, de cat-herd.gif et le convertir en une vidéo appelée chat-herd.mp4. Cela devrait prendre seconde à s'exécuter. Une fois la commande terminée, vous devriez pouvoir saisir ls à nouveau. et afficher deux fichiers:

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

Créer des vidéos WebM

Même si le format MP4 existe depuis 1999, le WebM est un nouveau venu, puisqu'il sorti en 2010. Les vidéos WebM peuvent être beaucoup plus petites que les vidéos MP4. il est logique de générer les deux. Heureusement, l'élément <video> vous permettra ajouter plusieurs sources. Ainsi, si un navigateur n'est pas compatible avec WebM, il peut utiliser MP4,

  • Dans la console, exécutez la commande suivante:
ffmpeg -i cat-herd.gif -c vp9 -b:v 0 -crf 41 cat-herd.webm
  • Pour vérifier la taille des fichiers, exécutez la commande suivante:
ls -lh

Vous devriez avoir un GIF et deux vidéos:

$ 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

Notez que le GIF d'origine a une taille de 3, 7 Mo, tandis que la version MP4 est en 551K. La version WebM n'est que 341 K. C'est une énorme économie !

Mettre à jour le code HTML pour recréer l'effet GIF

Les GIF animés ont trois caractéristiques principales que les vidéos doivent reproduire:

  • Elles se lancent automatiquement.
  • Elles sont lues en boucle (généralement, mais il est possible de les éviter).
  • Ils restent silencieux.

Heureusement, vous pouvez recréer ces comportements à l'aide de l'élément <video>.

  • Dans le fichier index.html, remplacez la ligne par <img> par:
<img src="/images/cat-herd.gif" alt="Cowboys herding cats.">
<video autoplay loop muted playsinline></video>

Un élément <video> utilisant ces attributs est lu automatiquement, en boucle sans fin, lire le contenu audio et l'utiliser de manière intégrée (c'est-à-dire pas en plein écran), attendus des GIF animés. 🎉

Spécifiez vos sources

Il vous suffit d'indiquer vos sources vidéo. L'élément <video> nécessite un ou plusieurs éléments enfants <source> pointant vers différents fichiers vidéo le navigateur peut choisir, selon le format pris en charge. Mettez à jour <video> avec des éléments <source> qui renvoient vers vos vidéos de troupeaux de chats:

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

Aperçu

  • Pour prévisualiser le site, appuyez sur Afficher l'application. Appuyez ensuite sur Plein écran plein écran

L'expérience doit être identique. Pour l’instant tout va bien.

Valider avec Lighthouse

Une fois le site en ligne ouvert:

  1. Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir les outils de développement.
  2. Cliquez sur l'onglet Lighthouse.
  3. Assurez-vous que la case Performances est cochée dans la liste Catégories.
  4. Cliquez sur le bouton Générer un rapport.

Vous devriez voir que l'option "Utiliser des formats vidéo pour le contenu animé" l'audit est maintenant réussi ! Excellent ! 💪