Utilisez des formats vidéo pour le contenu animé

Vous, vous avez utilisez des fichiers .gif sur votre site pour faire des animations sur votre site. Et vous vous êtes fait tapé sur les doigts par Google PageSpeed Insights quand vous avez voulu tester la vitesse de chargement de votre site. Ne vous inquiétez pas, nous sommes là pour vous aider.

Au fait, qui sommes nous ? Nous sommes l’agence web 36 Pixels, spécialisée dans l’optimisation des performances web, ou l’amélioration du temps de chargement des sites Internet, pour faire plus simple. Si notre travail vous intéresse, n’hésitez pas à nous contacter.

Bref, revenons-en à votre recherche de solution concernant la recommandation Google PageSpeed. Vous avez donc mis en place sur votre site des fichiers .gif, sans doute trop lourds, qui ralentissent le temps de chargement de votre site Internet. L’outil de Google vous propose donc de les remplacer par des vidéos. Oui mais quel type de vidéo et comment faire ? 36 Pixels vous répond, et voici le programme.

Qu’est-ce que le format .GIF ?

Le .GIF est un format d’image, au même titre que le .JPEG, le .PNG ou le .WEBP. Son principal intérêt est qu’il permet de créer des animations en image, avec des images qui s’enchainent les unes après les autres. C’est le seul format d’image qui permet de faire des animations (on passe le .svg qui est un format bien particulier).

Le .GIF signifie Graphics Interchange Format. C’est un très vieux format d’image, relativement à l’histoire du web. Il a été inventé en 1987 et a connu son heure de gloire sur le web : il fut désigné en 2012 le mot de l’année par le dictionnaire d’Oxford University, en édition américaine, la classe quoi.

Pourquoi le format .GIF pose problème ?

Pourquoi, quand on commence à s’intéresser à la vitesse de chargement d’un site Internet, le format .GIF peut-il poser problème alors que c’est un format énormément utilisé sur le web ? La réponse est simple : son poids. Une image .gif peut aisément peser 750 ko, et s’il s’agit de captures d’écran d’une courte vidéo, de 2 à 10 mo. De quoi ralentir votre site et le faire plonger dans les résultats de Google PageSpeed.

Google n’aime pas le .GIF et vous le fait savoir : « Les grandes images GIF sont inefficaces pour diffuser du contenu animé ». C’est clair.

Par quoi remplacer un fichier .GIF ?

Il existe 2 cas de figure pour remplacer un fichier .GIF.

Première cas, si votre image .GIF n’est pas une animation. Vous devriez alors la remplacer par un autre format de fichier. Le .PNG par exemple est intéressant car il permet comme le .GIF de gérer la transparence. Google vous conseille aussi d’utiliser le format .WEBP qui peut être intéressant pour minimiser encore plus son poids. C’est une bonne idée, mais avant de vous lancer, nous vous conseillons tout de même d’aller lire notre article sur les nouveaux formats d’image et leur utilisation.

Si votre image .GIF est un contenu animé, il est conseillé de la remplacer par une vidéo. La manoeuvre n’est pas compliqué, c’est une bonne nouvelle, mais il faut choisir le bon format de vidéo, car il y en a de nombreux et il faut sélectionner le bon. Ne vous inquiétez pas. Nous allons vous aider.

Quel format de vidéo utiliser pour le contenu animé ?

Il existe de nombreux formats vidéos utilisables sur le web, il sont différenciés par :

  • Leur niveau de compression et leur niveau de perte de qualité.
  • Leur format propriétaire ou non.
  • Leur support par les différents navigateurs.

Voici la liste de différents formats :

  • .MOV
  • .MP4
  • .AVI
  • .3GP
  • .FLV
  • .WMV

Et il y en a d’autres. Derrière ces différents formats, il y a une lutte entre différents acteurs qui espèrent tirer des royalties des droits d’utilisation. Et comme les GAFA sont concernés par ces formats, cela explique aussi leur différents niveaux de support par des navigateurs tels que Chrome, Safari, ou Edge.

Cette page canIuse est une référence. Elle permet de visualiser une bonne partie des formats vidéos et de voir leur support sur les différents navigateurs. Voici les leçons que nous pouvons en tirer.

Le format WebM, le meilleur format

Le format .WebM est un format Ouvert, c’est à dire gratuit. Il propose aujourd’hui l’une des meilleures qualité de compression et a été développé spécifiquement pour le web. Sans rentrer dans le détail, il supporte notamment les codec vidéos VP8 et VP9. A peu près 93% des navigations supportent aujourd’hui le format .WebM. C’est bien, mais pas suffisant pour ne pouvoir utiliser que ce format là sur votre site.

Le format MPEG-4/H.264, le format le plus reconnu

Le format MPEG-4/H.264 est un format plus classique de vidéo. Il présente un bon niveau de compression mais surtout, il est compatible avec près de 97% des navigations aujourd’hui. En navigateur récent, seul Opera Mini n’est pas compatible. Vous pouvez donc l’utiliser sans souci.

Les formats .OGG et HEVC/H.265

Le format .OGG ne présente pas aujourd’hui un bon support des navigateurs. Il n’est pas recommandé de l’utiliser. Le format HEVC ou H.265 présente la meilleure qualité de compression. Il n’est malheureusement pas encore supporté par beaucoup de navigateur (17% des navigations aujourd’hui). Vous pouvez cependant le mettre en place sur votre site dès maintenant, à condition d’utiliser d’autres formats en parallèle.

En conclusion sur les formats vidéos.

Si vous devez remplacer vos contenus animés par des vidéos, nous vous conseillons donc de proposer à vos visiteurs en priorité le format .WebM qui propose le meilleur format de compression, puis le format .MPEG4 qui est le plus compatible. Dans les faits, cela se concretise par ce type de code :

<video autoplay loop muted playsinline>
<source src="mavideo.webm" type="video/webm">
<source src="mavideo.mp4" type="video/mp4">
</video>

Vous remarquerez aussi l’utilisation des attributs « autoplay loop muted playsinline ». Ils permettent de recréer l’effet des .GIF, des animations qui se lancent automatiquement et tournent souvent en boucle.

Comment transformer un .GIF en vidéo ?

Nous ne sommes pas loin de la fin de cet article. Mais avant qu’il soit complet, on peut encore se demander comment transformer un contenu animé de type .GIF en une vidéo ? Dans l’idéal, il faudrait que ce soit simple et que vous n’ayez pas à passer par un logiciel.

La bonne nouvelle, c’est qu’il existe une multitude de site Internet qui vous proposent ce genre de service sur le web. Nous n’en n’avons pas de particulier à vous proposer. Le mieux du mieux aurait été un site qui vous convertisse votre contenu animé directement sous les 2 formats conseillés, mais cela n’existe pas, ou pas encore.

Quel gain espérer en utilisant des vidéos plutôt que des contenus animés ?

Soyons clair entre nous, vous ne pouvez pas conserver un fichier .GIF animé sur votre site si vous espérez pouvoir obtenir une bonne note sur Google PageSpeed Insight. Pour vous en convaincre, citons par exemple cet essai qui a été réalisé. Le site Cloudinary a récemment fait un test de passage d’une image .GIF à une vidéo .WebM ou .MPG4. D’un fichier .GIF de 6.3MB, ils ont réussi sans aucune difficulté à passer à un fichier .WebM de 311KB, soit un gain de 95%.

Comment Utiliser des formats vidéo pour le contenu animé sous WordPress ?

Sous WordPress, c’est à la fois simple et compliqué. Importer une vidéo au format .WebM ou .MPG4 est simple et passe par l’onglet « Médias » de WordPress. Jusqu’ici tout va bien. Placer une vidéo dans une page en utilisant l’éditeur Gutenberg de WordPress est aussi aisé, il existe un type de bloc spécifique Vidéo.

Mais parce qu’il y a un mais, il n’est pas possible d’uploader plusieurs vidéos alternatives, pour à la fois proposer un format .WebM et un format .Mpg4. Il y a actuellement une issue proposée sur Github. Elle a été ouverte en 2018 mais aucune solution UX/UI ne fait actuellement l’unanimité. Il faudra donc passer par le code .HTML et coller les lignes de codes que vous aurez trouvé plus haut pour optimiser votre vidéo.

Pour conclure sur le remplacement de contenu animé par une vidéo.

Remplacer un fichier .GIF animé par une vidéo n’est pas très compliqué, théoriquement mais peut s’avérer un peu moins simple sur WordPress pour être parfaitement optimisé.

Le gain espéré est très important. En effet, si Google vous fait cette recommandation, c’est sans doute que votre page souffre d’une image .GIF qui doit totalement pénaliser son temps de chargement. Ne passez donc pas à côté de cette modification.

Sachez aussi que la mise en oeuvre de cette modification peut être longue si vous avez une multitude de fichier .GIF. Il faudra en effet convertir chacun de vos fichiers en 2 fichiers distincts .WebM et .MPEG-4 et le résultat n’affectera que les pages ou vous avez fait les remplacements.

Enfin, si vous souhaitez de l’aide dans la mise en place de cette recommandation ou dans la réduction du temps de chargement de votre site d’une manière plus générale, n’hésitez pas à nous contacter !

Articles liés