Why Are GIFs So Large?
Three things make GIF files big:
- Every frame is compressed on its own. GIF has no motion prediction. An encoder can store only the changed rectangle of a frame, but anything that moves inside it is stored again in full.
- LZW compression is weak on video. It is lossless and works well on flat colors, but camera noise and gradients leave little to compress.
- Dithering adds noise. To fake missing colors with a 256-color palette, encoders scatter pixel patterns that compress poorly.
| GIF size | Pixels per frame | Raw data per frame | 5 s at 10 fps (50 frames) |
|---|---|---|---|
| 320 × 180 | 57,600 | 57.6 KB | 2.9 MB |
| 480 × 270 | 129,600 | 129.6 KB | 6.5 MB |
| 1280 × 720 | 921,600 | 921.6 KB | 46.1 MB |
| 1920 × 1080 | 2,073,600 | 2.07 MB | 103.7 MB |
Raw data = 1 byte per pixel (an index into the palette) × pixels × frames, in decimal MB. LZW shrinks this a lot for flat graphics but much less for camera footage. An H.264 MP4 of the same clip needs only a small share, because unchanged areas cost almost nothing.
Why Convert GIF to MP4?
An MP4 of the same animation is usually a small fraction of the GIF’s size. In Google’s web.dev example, a 3.7 MB GIF became a 551 KB MP4, about 85% smaller.
But size reduction is only part of the story. MP4 also provides better visual quality (millions of colors vs 256), smoother playback, and optional audio support. Google's web performance tools explicitly recommend this conversion.
How the Compression Difference Works
The dramatic size difference comes from fundamentally different compression approaches:
GIF: The Flipbook Approach
GIF stores animation as a sequence of separate images — like a flipbook. Each frame is a complete picture compressed independently with LZW lossless compression. If you have 100 frames of a person waving, GIF stores 100 complete images. The background, the room, the furniture — all stored 100 times, even though they do not change between frames.
MP4/H.264: The Smart Approach
H.264 uses temporal compression (inter-frame compression). It stores the first frame (keyframe) completely, then for subsequent frames, it stores only what changed. If the background is static, it is stored once. Only the moving hand is encoded in the following frames.
This is why the savings are so large. In many animations, most of each frame is identical to the previous one. GIF stores it again; MP4 stores only the part that changed.
| Metric | GIF | MP4 (H.264) |
|---|---|---|
| Frame storage | Each frame stored separately | Only changes between frames |
| Colors | 256 per frame | 16.7 million |
| 5s animation @ 15fps | 3-10 MB | 200-500 KB |
| Compression type | Spatial only (LZW) | Spatial + temporal |
Website Performance Benefits
For web developers and site owners, replacing animated GIFs with MP4 has measurable impact:
- Google Lighthouse flags it: Lighthouse explicitly warns "Use video formats for animated content" when it detects large animated GIFs. This is a direct signal that GIFs are hurting your performance score.
- Core Web Vitals improvement: Large GIFs directly impact Largest Contentful Paint (LCP) and can cause layout shifts (CLS) as they load. Replacing a 5 MB GIF with a 400 KB MP4 dramatically improves both metrics.
- Faster page loads: at 10 Mbps, a 5 MB GIF (40 megabits) takes about 4 seconds to download. A 400 KB MP4 (3.2 megabits) takes about 0.3 seconds.
- Lower bandwidth costs: if your page gets 100,000 views per month and each has a 5 MB GIF, that is 500 GB of bandwidth. Replacing with MP4 reduces it to 40 GB — a 92% reduction.
- Page experience: Core Web Vitals are part of Google’s page experience signals, and a lighter page helps them.
How to Embed MP4 as a GIF on Your Website
To make an MP4 behave exactly like an animated GIF (auto-playing, looping, silent), use the HTML5 <video> element with these attributes:
<video autoplay loop muted playsinline>
<source src="animation.mp4" type="video/mp4">
</video>
Each attribute serves a specific purpose:
autoplay— starts playback immediately (requiresmuted)loop— restarts when it reaches the endmuted— no sound (required for autoplay in all browsers)playsinline— plays inline on mobile Safari (without this, iOS opens fullscreen)
This combination replicates GIF behavior while the file is usually much smaller and the colors are better.
For even smaller files, provide a WebM source first with MP4 as fallback:
<video autoplay loop muted playsinline>
<source src="animation.webm" type="video/webm">
<source src="animation.mp4" type="video/mp4">
</video>
Quality Settings for GIF-to-MP4
H.264 quality is controlled by the CRF (Constant Rate Factor) parameter:
| CRF Value | Quality | Typical Size (5s GIF) | Use Case |
|---|---|---|---|
| CRF 18 | Visually lossless | 400-800 KB | Maximum quality, archival |
| CRF 23 | Good (default) | 200-500 KB | Recommended for most uses |
| CRF 28 | Decent | 100-300 KB | Smallest size, minor quality loss |
Our converter uses CRF 23 with the -tune animation flag, which is specifically optimized for animation content. This flag adjusts H.264's internal parameters for the characteristics of animated content (flat areas, sharp edges, limited motion), producing significantly better results than the default tuning.
When NOT to Convert (Keep the GIF)
There are legitimate reasons to keep the GIF format:
- Email marketing: HTML email clients have unreliable video support. GIF remains the standard for animated content in email campaigns.
- Messaging apps: Some messaging platforms (Slack, Discord, Teams) have dedicated GIF support with inline preview. Uploading an MP4 may not provide the same inline experience.
- Transparency: GIF supports 1-bit transparency (on/off). H.264 MP4 does not support transparency at all. If you need a transparent animated overlay, keep the GIF or use WebM with VP9 (which supports alpha channel).
- Social media GIF features: Platforms like Twitter/X and Reddit have specific GIF upload features that auto-loop. While they convert to video internally, the upload workflow expects GIF format. Instagram, by contrast, does not post GIF files as animations; see how to post a GIF on Instagram.
How to Make a Large GIF Smaller
- Lower the width: halving it cuts the pixels per frame by 75%.
- Use fewer frames: 10 fps instead of 20 halves the frame count.
- Shorten the clip and crop away borders that never change.
- Reduce colors to 128 or 64 and use lossy GIF compression (gifsicle
--lossy). Our guide to reducing GIF file size covers each method in more detail. - Switch to MP4 wherever video is accepted. The converter on this page keeps every frame.