Use video formats for animated content
This means that the URL contains animated content in GIF format.
Why is this important?
GIFs provide a convenient way to include animated content on web pages, as they are quick and easy to produce, and offer some key traits:
- They play automatically
- They loop continuously (usually, but it is possible to prevent looping)
- They're silent
However, GIFs are problematic for performance because of their typically huge file size. Even a small clip of a few seconds can easily blow up to several MB of data - which results in additional resource that browsers need to download.
On top of that, compression is difficult - GIF files are a nightmare to optimize because the image quality looks worse the more you optimize them. Essentially, they are a bad solution for modern web experiences.
What does the Hint check?
This Hint will trigger for any internal URL that contains at least one GIF image.
How do you resolve this issue?
Although normally associated with animated content, some GIF files are of static images. If this is the case, they should be replaced by PNGs, or, ideally, next-gen WebP format.
In the case that GIFs are being used for animated content, you should replace GIFs with video formats instead;
- Create MP4 videos
- Create WebM videos - these are smaller than MP4s, but not universally supported by browsers yet, so it makes sense to generate both and have MP4 as the fallback
- Recreate the key GIF traits by using <video> element: <video autoplay loop muted playsinline>
Instead of relying on scripts, you can typically solve this issue by employing an image CDN to do the heavy lifting of video conversion and optimization.
Since image CDNs can solve a number of image-based optimizations, they offer a practical solution that may be a good fit with dev overhead, so it is worth discussing this option with your developer to understand the feasibility of this.
Further Reading
- Use video formats for animated content (Lighthouse documentation)
- Replace animated GIFs with video for faster page loads
- Use image CDNs to optimize images
