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.
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.
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> :
<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.