No Video Formats for Animated Content

The Google Lighthouse system recommends using video formats where the content on your web page is automatically animated (GIFs). In this way, the loading performance of your web page increases, and certain KBs are saved. Lighthouse states in its report the size of the existing file and how much potential savings will be made to modify this file.

Video Formats for Animated Content

Why So? – Transforming GIFs into Video Formats 

We can say that large gifs are not a very effective tool for delivering animated content to the end user. So converting gifs to video format would mean saving in bandwidth. The formats you can use will be MPEG4 / WebM for animations. If we are talking about a static image, you can use PNG / WebP.

How to pass the audit?- Creating MPEG videos

You can use FFmpeg to convert gifs to video. The command you need to run to get video format using this tool is:

ffmpeg -i my-animation.gif my-animation.mp4

What this command does is this: It tells FFmpeg to accept my-animation.gif as an input. The system is flagged with the mentioned input -i. It then asks it to output this input as my-animation.mp4.

How to pass the audit?- Creating WebM videos

We can say that WebM videos are smaller in size than other MP4s, but one thing should be careful. Not all browsers support WebM.

Run the following command to convert your gif to Webm using FFmpeg:

ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm

How to pass the audit?- Replacing the GIF image with a video

There are three main features that force GIFs to be replaced with videos:

  1. Play automatically
  2. Continuously keep playing in a loop
  3. No audio files

To change these, you can recreate the file with these codes: 

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

Test Your Website Performance!

You can quickly analyze your site in a minute