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.
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:
- Play automatically
- Continuously keep playing in a loop
- No audio files
To change these, you can recreate the file with these codes: