What Is the Best Video Format for the Web?
| Format | Video / audio codec | Plays in | File size | Use it for |
|---|---|---|---|---|
| MP4 | H.264 / AAC | Every browser and device | Baseline | The default and the fallback |
| WebM | VP9 / Opus | All current major browsers | Often about 30% smaller | Primary source on your own site |
| MP4 or WebM | AV1 / Opus or AAC | Chrome, Firefox, Edge; Safari with AV1 hardware | Smallest | High-traffic sites that can encode twice |
| MOV, AVI, MKV | Various | Not reliably in browsers | — | Convert before putting on a website |
Short answer: encode MP4 (H.264, AAC) so the video plays everywhere, and add a WebM (VP9) source first for browsers that can use the smaller file. For YouTube, Vimeo or social networks, MP4 is all you need.
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.
Illustrative example for a 30-second 1080p clip (real sizes depend on the content):
| Format | Codec | File Size | Quality |
|---|---|---|---|
| MP4 | H.264, CRF 23 | ~10 MB | Reference |
| WebM | VP9, CRF 30 | ~6 MB | Similar |
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: recent versions — 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: roughly comparable 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: high audio quality for most content
- -b:v 0: pure quality-based encoding (no bitrate cap)
- yuv420p, even dimensions: 8-bit 4:2:0 color that every VP9 decoder plays; width and height are rounded to even numbers
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 compresses better than VP9 but encodes much more slowly. Browser support: Chrome 70+, Firefox 67+, and Safari 17+ on devices with AV1 hardware decoding. For sites with heavy video usage, AV1 is the future — but VP9 remains the practical choice in 2026 for most use cases.
Video Format vs Codec: What’s the Difference?
A video format (container) is the file wrapper: MP4, WebM, MOV, MKV. A codec is how the pictures and sound inside are compressed: H.264, VP9, AV1, AAC, Opus.
Browsers need both to match: an MP4 with H.264 plays everywhere, but an MP4 with H.265 may not. When a guide says “use MP4”, it means MP4 with H.264 video and AAC audio.