top of page
Writer's pictureBrent D. Payne

Use video formats for animated content

Content found here employs GIF formats for showcasing animated visuals.

Why is this important?

GIF formats are frequently utilized for their ease of creation and playback characteristics, which include:

  • Automatic playback

  • Continuous looping

  • No sound

Despite their convenience, GIF files often lead to performance issues due to their large sizes, which in turn require significant bandwidth to load, potentially slowing down a website.


GIF files also struggle with compression, degrading in quality with each reduction in size, making them less than ideal for contemporary web usage.


What does the Optimization check?

Our Optimization scrutinizes any internal link containing at least a single GIF image.


How do you resolve this issue?

Where GIFs represent static images, they should be converted to PNG files or, better yet, next-gen WebP format for higher efficiency.


If the GIFs in question are for animation purposes, consider replacing them with more efficient video formats:

  • Create MP4 videos — typically the standard in video file types

  • Create WebM videos — generally smaller in file size but not yet fully browser-supported; making both formats and using MP4 as a fallback is a wise strategy

  • Retain GIF-like qualities by implementing the<video autoplay loop muted playsinline>tag

Often, you can leverage an image CDN service to handle video transformations and optimizations, rather than relying on scripting solutions.


An image CDN can resolve a multitude of image-related optimization issues efficiently. Discuss its implementation with your developer for a potential enhancement to your site's performance.


Further Reading

  • Effective use of video formats instead of GIFs (Refer to Lighthouse documentation)

  • Optimizing page loads by replacing GIFs with videos

  • Leveraging image CDNs for image optimization

5 views
bottom of page