Why Animated GIFs Are Slowing Down Your Pages
Animated GIFs are a convenient way to add motion to a page, but they come with a heavy performance cost. Because they use lossless compression and store every frame as a full image, file sizes balloon quickly. Swapping them for compressed video formats is one of the fastest, highest-impact fixes you can make to a page's load time.
This walkthrough starts with a page that contains an animated GIF and uses Lighthouse to measure the damage before and after the replacement.
Setting the Baseline
Before touching any code, verify the problem. Open DevTools with Control+Shift+J (or Command+Option+J on Mac), go to the Lighthouse tab, keep Performance selected under Categories, and run a report. The resulting audit will flag the animated GIF under "Use video formats for animated content."
Converting with FFmpeg
Install FFmpeg locally, or use the version already available in your Glitch VM. Open the terminal and verify the install:
which ffmpeg
If successful, FFmpeg returns a version string, confirming it is ready to use.
Generate MP4 and WebM Files
Change into the images directory and run FFmpeg against the source file:
ffmpeg -i cat-herd.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p cat-herd.mp4
The -i flag marks the input file; this command converts cat-herd.gif into an MP4. A quick ls confirms both files are present.
MP4 is universally supported and will cover all modern browsers, but WebM often produces even smaller files. Generate a WebM version with a second FFmpeg call:
ffmpeg -i cat-herd.gif -c vp9 -b:v 0 -crf 41 cat-herd.webm
After running ls -lah to list sizes, the original GIF is well over 3 MB, while the MP4 clocks in under 600 KB and the WebM can be less than half of that — a material reduction in transferred bytes.
Replicating GIF Behavior in HTML
Animated GIFs display automatically, loop continuously, and contain no audio. The <video> element replicates all of this with a few attributes. Replace the <img> tag in your markup:
<img src="https://web.dev/images/cat-herd.gif" alt="Cowboys herding cats.">
<video autoplay loop muted playsinline></video>
Set autoplay, loop, and muted to mirror GIF behavior; playsinline keeps playback inside the page rather than triggering fullscreen on mobile devices.
Finish by adding one or more <source> children inside the video element. Browsers use the first source they can decode, so listing WebM and MP4 provides progressive fallback coverage:
<video autoplay loop muted playsinline>
<source src="/images/cat-herd.webm" type="video/webm">
<source src="/images/cat-herd.mp4" type="video/mp4">
</video>
Confirming the Results
After updating the live site, run Lighthouse again with the same settings used at the beginning. The "Use video formats for animated content" audit stops flagging the asset, confirming you removed an avoidable large download from your critical path.
Replacing animated GIFs with video is one of the lowest-effort changes a page can make. You keep the same visual effect, but the network payload goes down drastically, and Lighthouse gives you a cleaner report with no extra tooling required beyond FFmpeg.
