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 une vidéo.

Mesurer d'abord

Commencez par mesurer les performances du site Web:

  1. Pour prévisualiser le site, appuyez sur Afficher l'application, puis 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 Generate report (Générer un rapport).

Une fois que vous avez terminé, Lighthouse a signalé le GIF comme étant un problème dans l'audit "Utiliser des formats vidéo pour le contenu animé".

Télécharger FFmpeg

Il existe plusieurs façons de convertir des GIF en vidéos. Ce guide utilise FFmpeg. Il est déjà installé dans la VM Glitch. Si vous le souhaitez, vous pouvez également suivre ces instructions pour l'installer sur votre ordinateur local.

Ouvrir la console

Vérifiez que FFmpeg est installé et fonctionne correctement:

  1. Cliquez sur Remix to Edit (Remixer pour modifier) pour rendre le projet modifiable.
  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 d'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 prendre l'entrée, représentée par l'indicateur -i, de cat-herd.gif, et de la convertir en une vidéo appelée cat-herd.mp4. L'exécution devrait prendre une seconde. Une fois la commande terminée, vous devriez pouvoir saisir à nouveau ls et voir deux fichiers:

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

Créer des vidéos WebM

Bien que le format MP4 existe depuis 1999, WebM est un nouveau système relativement nouveau depuis sa sortie initiale en 2010. Les vidéos WebM peuvent être beaucoup plus petites que les vidéos MP4. Il est donc logique de générer les deux. Heureusement, l'élément <video> vous permet d'ajouter plusieurs sources. Par conséquent, si un navigateur n'est pas compatible avec WebM, il peut utiliser le format 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 devez 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 est de 3, 7 Mo, tandis que la version MP4 est de 551 Ko et la version WebM de seulement 341 Ko. C'est une belle économie !

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

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

  • Elles sont lues automatiquement.
  • Elles sont lues en boucle (généralement, mais il est possible de les éviter).
  • Ils sont 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 se lancera automatiquement, en boucle sans fin, ne lira pas de son et sera lu de manière intégrée (c'est-à-dire en mode plein écran), tous les comportements attendus des GIF animés. 🎉

Spécifiez vos sources

Il ne vous reste plus qu'à spécifier les sources de vos vidéos. L'élément <video> nécessite un ou plusieurs éléments enfants <source> pointant vers différents fichiers vidéo parmi lesquels le navigateur peut choisir, selon la compatibilité du format. Mettez à jour <video> avec des éléments <source> qui renvoient à vos vidéos de garde 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, puis sur Plein écran plein écran.

L'expérience devrait être la même. Jusqu'ici tout va bien.

Valider avec Lighthouse

Lorsque le site en ligne est 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 Generate report (Générer un rapport).

L'audit "Utiliser des formats vidéo pour le contenu animé" devrait maintenant s'afficher. Excellent ! 💪