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.

Mesurez 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 DevTools.
  3. Cliquez sur l'onglet Lighthouse (Phare).
  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 problème dans l'audit "Utiliser des formats vidéo pour le contenu animé".

Obtenir 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. Si vous le souhaitez, vous pouvez également suivre ces instructions pour l'installer sur votre machine locale.

Ouvrir la console

Vérifiez que FFmpeg est installé et fonctionne:

  1. Cliquez sur 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 un 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 prendre l'entrée, indiqué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

Alors que le format MP4 existe depuis 1999, le format WebM est relativement récent, puisqu'il a été lancé 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. Ainsi, si un navigateur n'est pas compatible avec WebM, il peut utiliser MP4 à la place.

  • 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 fait 3, 7 Mo, tandis que la version MP4 fait 551 Ko et que la version WebM ne fait que 341 Ko. Cela représente une économie considérable !

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

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

  • Elles sont lues automatiquement.
  • Ils sont en boucle en continu (généralement, mais il est possible d'empêcher la boucle).
  • Elles sont silencieuses.

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

  • Dans le fichier index.html, remplacez la ligne contenant <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 lance automatiquement, en boucle sans fin, ne diffuse aucun contenu audio et se lit en ligne (c'est-à-dire pas en plein écran), tous les comportements attendus des GIF animés. 🎉

Spécifier vos sources

Il ne vous reste plus qu'à spécifier vos sources vidéo. 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, en fonction de la prise en charge des formats. Remplacez <video> par des éléments <source> qui redirigent vers vos vidéos sur les 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 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 DevTools.
  2. Cliquez sur l'onglet Lighthouse (Phare).
  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 constater que l'audit "Utiliser des formats vidéo pour le contenu animé" est maintenant accepté. Excellent ! 💪