Quel format choisir pour une image animée ?

Il existe de nombreuses méthodes pour réaliser une image animée, et ce n'est pas toujours facile de savoir quels types de fichiers choisir pour les différents cas d’utilisation. Vous pouvez opter pour un GIF, une vidéo, un Sprite (plusieurs images regroupées en un seul fichier), un SVG, une animation via <canvas> ou encore utiliser le Webp (format d'image matricielle développé et mis à disposition du public par Google). Vous êtes perdu ?  Pour vous aider à y voir plus clair, on vous explique ici quels sont les avantages et inconvénients de tous ces fichiers.  

Le GIF

C'est le format le plus utilisé pour des images animées

Le GIF offre 3 avantages principaux : il supporte la transparence, il tourne en boucle automatiquement, et il est très facile à intégrer en développement.

Il manque d'interaction et demande du temps de création

Il y a aussi quelques points faibles. Tout d'abord, ils ne permettent aucune interaction. Un GIF répète continuellement la même animation et ne peut pas être mis sur pause ou afficher une autre piste de lecture. Ensuite, c'est un format qui demande du temps, que ce soit pour sa création ou pour son développement. Il faut aussi tenir compte du poids du fichier qui peut être rapidement lourd.

Exemple de GIF transparent

La vidéo

Elle est interactive

Avec le format vidéo, il est possible de gérer facilement l'interaction en JavaScript avec la balise vidéo en HTML5. Celle-ci va permettre de lire la vidéo et de la mettre en pause en un clic. Les contrôles de la vidéo, notamment l’icône play/pause et la gestion du volume, peuvent d'ailleurs être masqués pour créer l'illusion que ce n'est pas une vidéo classique. On peut utiliser la balise <video> afin d'intégrer plusieurs sources qui s'adapteront à chaque taille d'écran. Cela permettra d'optimiser le temps de chargement. La vidéo permet d'afficher une animation fluide avec un certain nombre d'images par seconde, tout en étant facile à intégrer en développement. Elle supporte aussi la transparence.

Le fichier peut être lourd, et long a créer

Comme pour un GIF, la création d'une vidéo demande du temps et elle ne pourra proposer qu'une seule piste de lecture. Le fichier peut être lourd. Tout dépendra de la longueur de la vidéo et de sa qualité. Et pour finir, ce n'est pas possible de l'intégrer sur Vimeo ou Youtube, sinon vous perdrez toute l'interactivité de la balise <video>.

Le sprite

De son vrai nom "Sprite sheet", un Sprite est une image composée de plusieurs images plus petites. Le but est de les afficher les unes à la suite des autres pour obtenir une suite d'images. C'est un peu comme un calepin, avec un dessin sur chaque page, que vous faites défiler avec votre pouce.

Il est facile à créer et à développer

C'est un format qui supporte bien la transparence, et il est possible de mettre plusieurs animations sur un seul Sprite. Attention tout de même au poids de l'image. Un Sprite reste une image, on peut utiliser la balise <picture> pour intégrer plusieurs sources adaptées à chaque taille d'écran, ce qui permettra d'optimiser le temps de chargement. Et comme c'est un fichier image, il y a peu de frames et il sera facilement modifiable. Vous n'aurez pas besoin d'ouvrir un logiciel de montage. Il est relativement facile à créer, et n'est pas très complexe à développer non plus. Vous pouvez l'intégrer en tant qu'image de fond en CSS avec la propriété background-image.

C'est souvent difficile de créer un sprite fluide et de bonne qualité

Les Sprites c'est bien, mais il y a quand même quelques inconvénients. Premièrement, la fluidité et la qualité sont assez limitées. Pour qu'il soit fluide, il devra contenir beaucoup d'images ce qui va très rapidement impacter le poids du Sprite. Mais pour obtenir une bonne qualité, il ne faut pas qu'il y ait trop d'images ! C'est à vous de trouver le juste milieu. Et puis comme les formats précédents, il ne contient qu'une seule piste de lecture.

Le SVG animé

Il est interactif et léger

C'est un format qui supporte la transparence et qui est totalement interactif. Chaque élément du SVG est identifiable en JavaScript et il est possible d'interagir avec chaque détail de l'animation. Il fonctionne un peu comme une vidéo. Vous pouvez gérer la position du time-code et ne lire qu'une seule partie de l'animation. Il est relativement léger à charger car c'est un fichier vectoriel, et c'est plutôt rapide à intégrer en développement.

C'est une animation longue à créer

C'est un format qui demande du temps au niveau de la création et ne comporte qu'une seule piste de lecture.  

L'Animation via <canvas> et librairies javascript d'animations

Il permet une grande liberté de création

Le gros avantage avec ce format c'est qu'on peut tout faire, au pixel près. A partir du moment où vous utilisez une balise <canvas>, vous pouvez faire tout ce que vous voulez. Ce qui est aussi intéressant, c'est qu'il est relativement léger.

Le temps de développement est très long

Alors oui, vous êtes totalement libre mais en contrepartie cela signifie aussi énormément de temps de développement. Ensuite, beaucoup de calculs sont gérés par la carte graphique. Il faut donc faire attention aux animations trop lourdes car elles peuvent poser problème sur les petites configurations. Il faut aussi savoir que la plupart des animations qui utilisent cette balise HTML sont faites avec des librairies JavaScript. Pour réaliser une animation, il faudra donc être capable de les maitriser. Vous pouvez par exemple utiliser la librairie animejs.com.

Le WEBP

Des fichiers plus petits pour une qualité identique ou supérieure

Ce format d’image a été développé dans le but de permettre une meilleure compression des images et d’obtenir une taille de fichier aussi faible que possible sur le web. Ainsi, les fichiers sont plus légers, ce qui est essentiel pour la rapidité de chargement d’une page. Et cela n'aura pas d'impact sur la qualité. Il permet de réaliser des animations similaires à ce que proposent les GIF et autorise la transparence.

Certains navigateurs ne le prennent pas en charge

L’inconvénient du WebP, c’est qu’il n’est pas supporté par tous les navigateurs Web. Chrome, Firefox et Microsoft Edge le prennent en charge, mais ce n'est pas le cas d'Apple dans Safari. WordPress ne le supporte pas non plus actuellement, vous ne pourrez pas télécharger de fichiers WebP dans votre médiathèque.  

Le format à choisir en fonction du type d'animation que vous souhaitez

Pour tout résumer en quelques mots : Le SVG animé est le format le plus adapté pour une animation complexe. Le GIF est une très bonne alternative pour réaliser une image animée, mais on vous conseille de l’utiliser plutôt pour des détails et des petits éléments de décor. La vidéo vous conviendra très bien si vous cherchez à obtenir de l’interaction et si son poids reste convenable. Le Sprite se rapproche du format vidéo, mais il est plus adapté pour des animations courtes. L’animation via <canvas> est la meilleure option pour une grosse animation ou un site conceptuel extrêmement graphique. Le WebP est le plus approprié si votre objectif est d'optimiser la vitesse de chargement de votre page mais il ne sera pas visible sur tous les navigateurs.   Et voilà, vous avez toutes les cartes en main pour choisir la meilleure méthode et réaliser l'image animée que vous souhaitez ! Maintenant c'est à vous de jouer pour la créer. Bon courage !