Animation optimization

What is an optimized animation ?

An animation is a succession of images appearing in the same frame. We use the term "optimized animation" when the format used is optimal and allows the same rendering as another format for less weight. The most common format for animations is the GIF (Graphics Interchange Format), however this format is ineffective for large animations.

Why is it important to use optimized animation  ?

The GIF format for large animations weighs more than a video alternative and increases the network load required to download it. Using optimized animations improves the page load time and allows users to view the content faster.

How can it be optimized ?

In order to reduce the weight of animations, it is necessary to change the GIF format to an MPEG or WebM video format.

It is possible to recreate the characteristics of a GIF animation thanks to the HTML tag <video> :

• launches automatically : thanks to the "autoplay" attribute
• continuous loop: thanks to the "loop" attribute
• is silent: thanks to the "muted" attribute

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

The "playsinline" attribute allows the video to be played online and does not automatically launch full screen on mobiles when playback begins.