![]() MPEG4 is the format that's been around for the longest since around 1999 and enjoys great browser support. There are 2 video formats that are popular choices for videos on the web: WebM and MPEG4. Even better, Cloudinary can automatically convert GIFs to WebM and/or MPEG4 videos which will result in even more savings in file size compared to the lossy GIF compression. Because they are using Cloudinary, the Dev Community could take advantage of Cloudinary's ability to use lossy compression to compress any uploaded GIF assets and reduce the file size by around 50% without losing too much quality. One other thing that I've noticed with the Dev Community is that they are using Cloudinary as a CDN for their image and video assets (notice the URL of the GIF source in the HTML element). Support for the loading attribute on img elements at the time of writing ( See current support here). By reducing the amount of data a user needs to download to view content, they are able to load assets faster as well as use less mobile data (which can be very expensive, especially for us Canadians). ![]() This is something very important for Twitter, where users may encounter many GIFs while scrolling their timeline (which translates to more data being downloaded on a user's phone). Actually, when you post a GIF on Twitter, Twitter converts the GIF into a video, which dramatically reduces the file size. Video files are much smaller than GIFs and they are more easily decoded in the browsers compared to GIFs. However, there is a better alternative to using GIFs and that alternative is to use videos instead. GIFs are not optimized to be used on the web: their file size is very large and decoding GIFs in the browser is not a very performant operation. ![]() With that being said, GIFs are not good for the web. They are used on Twitter as a way to react to something, they are used in blog posts to make them more interesting, and they are used for the majority of conversations amongst coworkers on Slack (or maybe that's just me?). Java is a registered trademark of Oracle and/or its affiliates.GIFs are an omnipresent part of the internet. For details, see the Google Developers Site Policies. 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.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 ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |