Replace Animated GIFs with Video
Convert animated GIFs to WebM or MP4 video to cut file size by 70–90%.
Metrics
This technique can move up to 67% of LCP's share of the Lighthouse score.
This technique does not move TBT.
This technique does not move CLS.
This technique can move up to 67% of FCP's share of the Lighthouse score.
This technique can move up to 67% of SI's share of the Lighthouse score.
This technique does not move TTFB.
Overview
Animated GIF is a 1989 format with no compression beyond basic LZW, no frame-delta encoding, and no audio stream. A 5-second looping animation commonly reaches 3–8 MB as a GIF. The same animation as WebM reaches 200–600 KB — a 90% reduction. Browsers stream video progressively and decode it on a hardware-accelerated thread rather than the main thread, eliminating both the transfer bottleneck and the decode cost.
Impact grade, A+ to D: how much of the Lighthouse score this technique can move. Unaffected: TBT, CLS, TTFB.
The Problem
A single animated GIF on a page can outweigh every other resource combined. Lighthouse flags GIFs larger than 100 KB under ‘Use video formats for animated content’. Beyond file size, GIF decoding ties up the main thread — each frame is decoded as a full-frame bitmap using CPU, not the GPU-accelerated video pipeline. On mobile, a 4 MB GIF can contribute 800–2000 ms to LCP and generate jank during playback.
Performance Impact
LCP
300–1500ms
if the GIF is the LCP element; transfer drops from MBs to KBs
FCP
100–600ms
bandwidth freed from GIF allows critical above-fold resources to arrive sooner
SI
200–800ms
overall page weight reduction accelerates all visible content
Risk: Low
video element requires muted + playsinline + autoplay attributes for silent autoplay
How it works
01
Convert GIF to WebM and MP4
Use FFmpeg to generate both formats:
ffmpeg -i anim.gif -c:v libvpx-vp9 -b:v 0 -crf 41 anim.webmandffmpeg -i anim.gif -movflags faststart -pix_fmt yuv420p anim.mp4. WebM is 20–30% smaller than MP4 with equivalent quality; MP4 is the fallback for Safari and older browsers.02
Replace the img tag with a video element
Use
<video>withautoplay loop muted playsinlineattributes. These four attributes together replicate the animated GIF experience across all browsers while enabling hardware-accelerated decoding and progressive streaming.03
Provide WebM first, MP4 as fallback
Use multiple
<source>elements inside<video>. Browsers pick the first format they support — Chrome, Firefox, and Edge pick WebM; Safari picks MP4. All modern browsers support at least one.04
Add a poster image for above-fold videos
Set
poster="/images/anim-frame1.webp"on the video element. The poster image displays while the first video frame loads, preventing a flash of empty space and giving the browser a candidate for LCP measurement.
Limitations
- Video autoplay with sound is blocked by browsers — the muted attribute is required. This is intentional behaviour, not a bug.
- autoplay may not work in all mobile browser contexts or when data-saver mode is enabled — the poster image must work as a static fallback.
- Server-side conversion with FFmpeg requires shell access — not available on all managed hosting plans.
Common Mistakes
Omitting the muted attribute and wondering why autoplay does not work
Browsers block autoplay with audio to prevent unwanted noise. The muted attribute is not optional — it is required for autoplay to work consistently across all browsers.
Converting GIF to MP4 only and skipping WebM
Chrome and Firefox prefer WebM (VP9), which is 20–30% smaller than H.264 MP4 at equivalent quality. Always generate both and let the browser choose — the bandwidth saving is measurable on mobile.
Need help applying this to your site?
Targeted fixes, not guesswork. We identify which techniques move the needle for your specific WordPress stack.
Start an Engagement