Optimiser le temps de chargement est devenu une priorité pour de nombreuses entreprises sur le web. Si les GIFs sont de plus en plus populaires, leur intégration sur les pages web peut très négativement impacter le temps de chargement de ces dernières. Voici une méthode vous permettant de convertir des Gifs en vidéos mp4 intégrées en HTML5 afin d’optimiser au mieux votre temps de chargement final sans pour autant avoir à renoncer à l’attrait marketing de l’effet GIF.
Comme vous le savez surement, le poids de votre page web et des fichiers qui y sont intégrés joue un rôle important dans le temps de chargement final de cette dernière et dans son positionnement dans les moteurs de recherche (notamment depuis la Google Speed Update).
Si les gifs peuvent apporter un plus indéniable à vos contenus, ils ont toutefois tendance à être dans la plupart des cas très volumineux et donc impacter de manière significative le temps de chargement de votre page.
Mais comme toujours, il existe des alternatives et astuces permettant de limiter l’impact des GIFs sur le temps de chargement tout en ayant un rendu quasi identique.
Dans notre cas, convertir des gifs en vidéos MP4 puis intégrer ces dernières en HTML5 est la solution la plus intéressante pour optimiser les performances de chargement des pages web. Voici comment procéder concrètement.
1- Pourquoi compresser des GIFs puis les intégrer en vidéo HTML5 ?
Avant de vous montrer comment compresser des GIFs et les intégrer en vidéos MP4, voici quelques éléments qui devraient vous aider à convaincre de l’intérêt de cette approche.
Vous avez l’habitude d’aller chercher vos gifs sur giphy ? Saviez-vous que sur leur site, Giphy n’intégrait en réalité pas de gifs directement sur ses pages web mais bien des vidéos .mp4 avec un poids optimisé qui tournent en boucle afin d’optimiser leur temps de chargement ?
Comme on peut le voir dans le code source des gifs intégrés sur Giphy, le site les affichent en format .mp4 (source de l’exemple)
Si le site star des gifs le fait, c’est pour une bonne raison. Les vidéos mp4 sont en moyenne 90% plus petites en poids que les gifs eux même.
Dans cet exemple, le fichier .gif a un poids d’origine de 7,74 Mo contre 1,3 Mo en format .mp4, soit -83%.
Pourquoi le format vidéo .mp4 et pas un autre ?
La deuxième question que l’on pourrait vous poser, c’est pourquoi le format .mp4 et pas un autre ?
Il existe 3 formats de vidéos compressées compatibles avec une intégration en HTML5 :
MP4,
Ogg,
WebM.
De ces trois formats de vidéos compressées, MP4 est le format le plus largement compatible avec les navigateurs puisque 95% de ces derniers le supportent complètement (contre 76% pour WebM et 41% pour le format OGG).
2- Comment convertir ou compresser un gif volumineux en une vidéo mp4 plus légère ?
La première étape va donc consister à convertir votre GIF en vidéo MP4 compressée.
Le plus simple, si vous n’avez que quelques GIFs à convertir, est de passer par un site internet dédié qui se chargera de faire la conversion pour vous.
La première étape consiste à charger votre Gif sur la plateforme de conversion en ligne (via votre ordinateur ou son URL si il est hébergé en ligne (ex : URL giphy se terminant par .gif))
Cliquez ensuite sur « Upload«
A cette étape, vous pourrez visualiser le poids avant conversion du Gif que vous souhaitez convertir
Il ne vous reste plus qu’à cliquer sur « Convert GIF to MP4 » pour lancer la conversion
Une fois le fichier converti, vous pourrez visualiser son poids final après conversion et l’enregistrer sur votre ordinateur en cliquant sur l’icône de disquette « Save« .
Dans notre exemple, nous avons diminué le poids du GIF de 94% en le passant au format .mp4 (7,74 Mo à 443,3 Ko).
Alternative : si vous êtes à l’aise avec les lignes de commande, vous pouvez aussi utiliser cette solution pour convertir vos GIF : https://www.ffmpeg.org/
Pour l’installer sur Windows, utilisez Chocolatey.
Une fois installé, il faudra réaliser une ligne de commande similaire à celle ci pour convertir votre GIF en MP4 (en modifiant le répertoire en fonction d’où se trouve votre gif et le nom du fichier source pour qu’il corresponde à celui à convertir) :
ffmpeg -i input.gif output.mp4
3- Comment intégrer une vidéo MP4 en HTML5 pour simuler un GIF ?
Habituellement, lorsque un GIF est intégré sur un site, le code HTML source contient la balise <img /> puisqu’un GIF n’est rien d’autre qu’un format d’image spécifique.
Dans notre cas, l’astuce va consister à intégrer le GIF converti en MP4 dans une balise HTML5 <video /> avec des attributs qui aideront la vidéo à simuler l’effet GIF :
son muet,
autoplay,
lecture en boucle.
Une fois votre GIF converti en vidéo MP4 et uploadé sur votre site (via FTP ou via l’interface d’administration de votre CMS), il ne vous restera plus qu’à l’intégrer en HTML5 en utilisant un code semblable à celui-ci :
<video alt="texte alternatif pour le GIF transforme en video" src="https://www.votredomaine.com/media/nom-de-votre-video.mp4" autoplay loop muted playsinline style="display:block;"></video>
Si l’on décortique ce code HTML5 :
l’attribut « alt » correspond au texte alternatif de la vidéo (même principe que pour une image
l’attribut « src » doit contenir l’URL de votre site ou votre video MP4 est hébergée
l’attribut « autoplay » va se charger de lire la video automatiquement
l’attribut « loop » va forcer la relecture en boucle de la vidéo
l’attribut « muted » va s’assurer que la vidéo est jouée sans son
l’attribut « playsinline » va faire en sorte que l’autoplay fonctionne correctement sur les appareils iOS
Voici le résultat de notre GIF compressé à 94% et intégré en vidéo MP4 HTML5 :
Attention :
Dans certains cas, notamment quand le gif est trop court, cette astuce ne fonctionnera pas idéalement. Il sera donc préferable d’intégrer le gif tel quel dans sa version la plus compressée possible afin de limiter au mieux son impact sur le temps de chargement. Si vous avez mis en place le lazy loading des images et gifs sur votre site, l’impact sera plus limité.
Fondateur de LEPTIDIGITALet consultant SEO senior (à mes heures perdues), je suis un grand passionné de marketing digital et de SEO. Avant d’être indépendant à 100 %, j’ai travaillé en tant qu’SEO manager et responsable e-commerce pour différentes sociétés (Altice Media, Infopro Digital, Voyage Privé, Groupe ERAM). (Sur le plan perso, je suis un grand curieux hyperactif aussi passionné par l’IA, la photographie et les voyages !). PS : Si vous souhaitez me contactez, privilégiez LinkedIn ou Instagram. Pour me contacter : [email protected]
