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:
- Pour prévisualiser le site, appuyez sur Afficher l'application, puis sur Plein écran .
- Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir les outils de développement.
- Cliquez sur l'onglet Lighthouse.
- Assurez-vous que la case Performances est cochée dans la liste Catégories.
- 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:
- Cliquez sur Remix to Edit (Remixer pour modifier) pour rendre le projet modifiable.
- Cliquez sur Terminal (remarque: si le bouton "Terminal" ne s'affiche pas, vous devrez peut-être utiliser l'option "Plein écran").
- 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 .
L'expérience devrait être la même. Jusqu'ici tout va bien.
Valider avec Lighthouse
Lorsque le site en ligne est ouvert:
- Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir les outils de développement.
- Cliquez sur l'onglet Lighthouse.
- Assurez-vous que la case Performances est cochée dans la liste Catégories.
- 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 ! 💪