Optimisation des animations

Qu'est-ce qu'une animation optimisée ?

Une animation est une succession d'images apparaissant dans un même cadre. On parle d'animation optimisée lorsque le format utilisé est optimal et permet d'effectuer le même rendu qu'un autre format pour un poids moindre. Le format le plus répandu pour les animations est le GIF (Graphics Interchange Format), cependant ce format est inéfficace pour les animations volumineuses.

Pourquoi est-il important qu'elle soit optimisée ?

Le format GIF pour des animations volumineuses pèse plus lourd qu'une alternative vidéo et augmente la charge réseau nécessaire à son téléchargement. Utiliser des animations optimisées améliore le délai de chargement de la page et permet aux utilisateurs de visualiser le contenu plus rapidement.

Comment l'optimiser ?

Afin de diminuer le poids des animations, il est nécessaire de changer le format GIF pour un format vidéo MPEG ou WebM.

Il est possible de récréer les caractéristiques d'une animation GIF grâce à la balise HTML <video> :

• se lance automatiquement : grâce à l'attribut "autoplay"
• boucle en continu : grâce à l'attribut "loop"
• est silencieuse : grâce à l'attribut "muted"

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

L'attribut "playsinline" autorise la vidéo à être jouée en ligne et ne lance pas automatiquement le plein écran sur les mobiles lorsque la lecture commence.