Replace GIFs with video  |  Articles  |  web.dev Skip to main content Resources Web Platform Dive into the web platform, at your pace. HTML CSS JavaScript User experience Learn how to build better user experiences. Performance Accessibility Identity Learn Get up to speed on web development. Learn HTML Learn CSS Learn JavaScript Learn AI Learn Performance Learn Accessibility More courses Additional resources Explore content collections, patterns, and more. AI and the web Explore PageSpeed Insights Patterns Podcasts & shows Developer Newsletter About web.dev Discover Baseline How to use Baseline Blog Case Studies / English Deutsch Español – América Latina Français Indonesia Italiano Polski Português – Brasil Tiếng Việt Türkçe Русский עברית العربيّة فارسی हिंदी বাংলা ภาษาไทย 中文 – 简体 中文 – 繁體 日本語 한국어 Sign in Articles Resources More Discover Baseline How to use Baseline Blog Case Studies Web Platform HTML CSS JavaScript User experience Performance Accessibility Identity Learn Learn HTML Learn CSS Learn JavaScript Learn AI Learn Performance Learn Accessibility More courses Additional resources AI and the web Explore PageSpeed Insights Patterns Podcasts &amp; shows Developer Newsletter About web.dev Home Articles Replace GIFs with video Stay organized with collections Save and categorize content based on your preferences. Rob Dodson X GitHub Homepage To follow this codelab, open this Glitch in a second tab. Note: This codelab uses Chrome DevTools. Download Chrome if you don't already have it. In this codelab, improve performance by replacing an animated GIF with a video. Measure first First measure how the website performs: To preview the site, press View App. Then press Fullscreen . Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools. Click the Lighthouse tab. Make sure the Performance checkbox is selected in the Categories list. Click the Generate report button. When you're finished, you should see that Lighthouse has flagged the GIF as an issue in its "Use video formats for animated content" audit. Get FFmpeg There are a number of ways you can convert GIFs to video; this guide uses FFmpeg. It's already installed in the Glitch VM, and, if you want, you can follow these instructions to install it on your local machine as well. Open the console Double-check that FFmpeg is installed and working: Click Remix to Edit to make the project editable. Click Terminal (note: if the Terminal button does not show you may need to use the Fullscreen option). In the console, run: which ffmpeg You should get a file path back: /usr/bin/ffmpeg Change GIF to video In the console, run cd images to enter the images directory. Run ls to see the contents. You should see something like this: $ ls cat-herd.gif In the console, run: ffmpeg -i cat-herd.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p cat-herd.mp4 This tells FFmpeg to take the input, signified by the -i flag, of cat-herd.gif and convert it to a video called cat-herd.mp4. This should take a second to run. When the command finishes, you should be able to type ls again and see two files: $ ls cat-herd.gif cat-herd.mp4 Create WebM videos While MP4 has been around since 1999, WebM is a relative newcomer having been initially released in 2010. WebM videos can be much smaller than MP4 videos, so it makes sense to generate both. Thankfully the <video> element will let you add multiple sources, so if a browser doesn't support WebM, it can fallback to MP4. In the console, run: ffmpeg -i cat-herd.gif -c vp9 -b:v 0 -crf 41 cat-herd.webm To check the file sizes run: ls -lh You should have one GIF, and two videos: $ ls -lh total 4.5M -rw-r--r-- 1 app app 3.7M May 26 00:02 cat-herd.gif -rw-r--r-- 1 app app 551K May 31 17:45 cat-herd.mp4 -rw-r--r-- 1 app app 341K May 31 17:44 cat-herd.webm Notice that the original GIF is 3.7M, whereas the MP4 version is 551K, and the WebM version is only 341K. That's a huge savings! Update HTML to recreate GIF effect Animated GIFs have three key traits that videos need to replicate: They play automatically. They loop continuously (usually, but it is possible to prevent looping). They're silent. Luckily, you can recreate these behaviors using the <video> element. In the index.html file, replace the line with the <img> with: <img src="/images/cat-herd.gif" alt="Cowboys herding cats."> <video autoplay loop muted playsinline></video> A <video> element using these attributes will play automatically, loop endlessly, play no audio, and play inline (that is, not fullscreen), all the behaviors expected of animated GIFs! 🎉 Specify your sources All that's left to do is specify your video sources. The <video> element requires one or more <source> child elements pointing to different video files the browser can choose from, depending on format support. Update the <video> with <source> elements that link to your cat-herd videos: <video autoplay loop muted playsinline> <source src="/images/cat-herd.webm" type="video/webm"> <source src="/images/cat-herd.mp4" type="video/mp4"> </video> Note: Browsers don't speculate about which <source> is optimal, so the order of <source>s matters. For example, if you specify an MP4 video first and the browser supports WebM, browsers will skip the WebM <source> and use the MPEG-4 instead. If you prefer a WebM <source> be used first, specify it first! Preview To preview the site, press View App. Then press Fullscreen . The experience should look the same. So far so good. Verify with Lighthouse With the live site open: Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools. Click the Lighthouse tab. Make sure the Performance checkbox is selected in the Categories list. Click the Generate report button. You should see that the "Use video formats for animated content" audit is now passing! Woohoo! 💪 Except 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. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates. Last updated 2018-11-05 UTC. [[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2018-11-05 UTC."],[],[]] web.dev web.dev We want to help you build beautiful, accessible, fast, and secure websites that work cross-browser, and for all of your users. This site is our home for content to help you on that journey, written by members of the Chrome team, and external experts. Contribute File a bug See open issues Related Content Chrome for Developers Chromium updates Case studies Podcasts & shows Follow @ChromiumDev on X YouTube Chrome for Developers on LinkedIn RSS Terms Privacy Manage cookies English Deutsch Español – América Latina Français Indonesia Italiano Polski Português – Brasil Tiếng Việt Türkçe Русский עברית العربيّة فارسی हिंदी বাংলা ภาษาไทย 中文 – 简体 中文 – 繁體 日本語 한국어