La section "Opportunités" de votre rapport Lighthouse répertorie tous les GIF animés, ainsi que les économies en secondes réalisées en les convertissant en vidéos:
Pourquoi remplacer les GIF animés par des vidéos
Les grands GIF ne sont pas efficaces pour diffuser du contenu animé. En convertissant ces GIF volumineux en vidéos, vous pouvez économiser beaucoup de bande passante. Envisagez d'utiliser des vidéos MPEG4/WebM pour les animations et PNG/WebP pour les images statiques au lieu de GIF afin d'économiser des octets réseau.
Créer des vidéos MPEG
Il existe plusieurs façons de convertir des GIF en vidéos.
L'outil FFmpeg est utilisé dans ce guide.
Pour convertir le GIF my-animation.gif
en vidéo MP4 à l'aide de FFmpeg, exécutez la commande suivante dans votre console:
ffmpeg -i my-animation.gif my-animation.mp4
Cela indique à FFmpeg d'utiliser my-animation.gif
comme entrée (signifié par l'indicateur -i
) et de le convertir en vidéo appelée my-animation.mp4
.
Créer des vidéos WebM
Les vidéos WebM sont beaucoup plus petites que les vidéos MP4, mais tous les navigateurs ne sont pas compatibles avec WebM. Il est donc logique de générer les deux.
Pour utiliser FFmpeg afin de convertir my-animation.gif
en vidéo WebM, exécutez la commande suivante dans votre console:
ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm
Remplacer l'image GIF par une vidéo
Les GIF animés présentent trois caractéristiques principales qu'une vidéo doit reproduire:
- La lecture se lance automatiquement.
- Elles sont lues en boucle (généralement, mais il est possible d'éviter les boucles).
- Ils sont silencieux.
Heureusement, vous pouvez recréer ces comportements à l'aide de l'élément <video>
.
<video autoplay loop muted playsinline>
<source src="my-animation.webm" type="video/webm" />
<source src="my-animation.mp4" type="video/mp4" />
</video>
Utiliser un service qui convertit les GIF en vidéos HTML5
De nombreux CDN d'images acceptent la conversion vidéo GIF vers HTML5. Vous importez un GIF sur le CDN de l'image, lequel renvoie une vidéo HTML5.
Conseils spécifiques à la pile
AMP
Pour le contenu animé, utilisez amp-anim
afin de minimiser l'utilisation du processeur lorsqu'il se trouve en dehors de l'écran.