Why Video Size Matters for Websites
Video is one of the largest assets on most web pages. A poorly optimized hero video or background clip can add megabytes to page weight, directly impacting:
- LCP (Largest Contentful Paint): if the video is the largest element, its load time determines this Core Web Vital metric
- Bandwidth costs: serving 10 MB MP4s to millions of visitors adds up quickly
- Mobile experience: users on cellular connections suffer most from large video files
- SEO ranking: Google uses Core Web Vitals as a ranking signal
WebM + VP9 vs MP4 + H.264 for Web
At identical visual quality (SSIM/VMAF matched), WebM with VP9 encoding produces files that are 30–50% smaller than MP4 with H.264. For a site serving 100 GB of MP4 video monthly, switching to WebM could save 30–50 GB of bandwidth.
Real-world comparison on the same 30-second 1080p clip:
| Format | Codec | File Size | Quality (VMAF) |
|---|---|---|---|
| MP4 | H.264, CRF 23 | 10 MB | 94.2 |
| WebM | VP9, CRF 30 | 6 MB | 94.1 |
Browser Support in 2026
WebM VP9 is supported by 97%+ of global browsers as of 2026:
- Chrome: since version 29 (2013)
- Firefox: since version 28 (2014)
- Edge: since version 14 (Chromium-based since 79)
- Safari: since version 16.6 (2023) — the last major holdout
Only IE11 and very old Safari versions lack support, representing negligible market share in 2026.
The HTML5 Video Fallback Pattern
The recommended approach is to serve WebM first with MP4 as a fallback using the HTML5 <source> element:
<video autoplay loop muted playsinline>
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
</video>
The browser downloads and plays the first source it supports. Since 97%+ of browsers support WebM, the vast majority of visitors get the smaller file. The MP4 fallback ensures the remaining ~3% still see the video.
The autoplay loop muted playsinline attributes make the video behave like a GIF — auto-playing, looping, silent, and inline on mobile Safari.
Core Web Vitals Impact
Switching from MP4 to WebM directly improves web performance metrics:
- LCP improvement: smaller files download faster, improving Largest Contentful Paint
- Lower bandwidth: better mobile experience, especially on slow connections
- Google recommendation: Lighthouse and web.dev explicitly recommend optimized video formats
Our VP9 Encoding Settings
Our converter uses these VP9 settings, optimized for web delivery:
- CRF 30: equivalent to H.264 CRF 23 in visual quality
- cpu-used 3: balanced encoding speed for online service
- row-mt 1: row-based multithreading for faster encoding
- Opus 128k audio: transparent audio quality, superior to AAC at this bitrate
- -b:v 0: pure quality-based encoding (no bitrate cap)
For deeper VP9 configuration, see our VP9 encoding settings guide.
WebM Alpha Channel (Transparency)
VP9 in WebM supports alpha channel transparency — a unique advantage over H.264/MP4. This enables transparent video overlays on websites: animated logos, characters, effects that blend seamlessly with any background. Use -pix_fmt yuva420p in FFmpeg to encode with alpha.
AV1: The Next Step
AV1 is the next-generation open codec from the Alliance for Open Media. It offers an additional 30% compression improvement over VP9 but encodes 5–10x slower. Browser support is growing (Chrome 70+, Firefox 67+, Safari 17+). For sites with heavy video usage, AV1 is the future — but VP9 remains the practical choice in 2026 for most use cases.