Java is a registered trademark of Oracle and/or its affiliates. For details, see the Google Developers Site Policies. If there is a HTML Video element on the web page the GIF will keep the same aspect ratio to avoid any distortion. You may have to wait a short file for the animated GIF to be created. Replace animated GIFs with video for faster page loadsĮxcept as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. Automatically create short animated GIFs from YouTube, Vimeo, webm, ogv or mp4 videos from the video you are currently watching.Source code for Use video formats for animated content audit.GIF to the image CDN, and the image CDN returns an HTML5 video. Many image CDNs support GIF to HTML5 video conversion. Use a service that converts GIFs to HTML5 videos Luckily, you can recreate these behaviors using the element. They loop continuously (usually, but it is possible to prevent looping).To use FFmpeg to convert my-animation.gif to a WebM video,įfmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm Replace the GIF image with a videoĪnimated GIFs have three key traits that a video needs to replicate: WebM videos are much smaller than MP4 videos,īut not all browsers support WebM, so it makes sense to generate both. This tells FFmpeg to take my-animation.gif as the input,Īnd to convert it to a video called my-animation.mp4. Run the following command in your console:įfmpeg -i my-animation.gif my-animation.mp4 To use FFmpeg to convert the GIF, my-animation.gif to an MP4 video, There are a number of ways to convert GIFs to video. Large GIFs are inefficient for delivering animated content.īy converting large GIFs to videos, you can save big on users' bandwidth.Ĭonsider using MPEG4/WebM videos for animations and PNG/WebPįor static images instead of GIF to save network bytes.
Why you should replace animated GIFs with video How your page's overall performance score is calculated. Lighthouse performance scoring post to learn The Opportunities section of your Lighthouse report listsĪll animated GIFs, along with estimated savings in secondsĪchieved by converting these GIFs to video: Note: See the