Lighthouse: Use video formats for animated content
Overview
Many websites and applications use animated content in the form of GIFs. However, GIFs can sometimes be very large, making them inefficient for delivering animated content.
Instead of using large GIFs, consider delivering animated content via MPEG4 or WebM video files.
How does your site score on this audit?
How does using video formats for animated content affect page performance?
Whenever a page loads, the browser requests the server for all the page resources. If these files are large, they will require more time to download, incurring a higher network cost and slowing down your page load.
Converting GIFs to video formats can cause drastic reductions in file sizes and save essential bandwidth for your visitors.
Video files can be downloaded much faster by the browser, speeding up your page load, and improving your visitors' page experience.
How does GTmetrix trigger this audit?
GTmetrix flags this audit if it identifies any GIF that is over 100 KB.
Clicking the audit reveals the unoptimized GIFs, along with how many KB you can save through conversion to a video format.
How to fix this audit?
There are 2 main strategies used to convert GIFs to videos, including:
1) Using an online converter
You can use an online converter like ezgif.com to convert your GIFs to MPEG4s.
2) Using a cross-platform tool
You can use a cross-platform command-line tool like FFmpeg to convert your GIFs to MPEG4s or WebMs.
Note that WebM is a newer format that is not supported by all browsers and devices yet. See here for a list of compatible browsers and devices.