MP4 vs WebM for the web - when to use each format
MP4 (H.264) and WebM (VP9/AV1) are the two video container formats for the web. MP4 is the universal default that plays on every browser and device; WebM delivers 30-40% smaller files in modern browsers using royalty-free codecs. This guide covers the codec tradeoffs, browser support in 2026, and the three production decisions that determine which format to ship.
Free Tool Online Editorial TeamContainer vs codec - what each file actually holds
A container wraps video, audio, and metadata into a single file that a player can read. MP4 (ISO base media) and WebM (a restricted Matroska profile) are both containers. The codec is how the video pixels and audio samples are compressed. An MP4 can, in theory, carry almost any codec, but in practice the web ecosystem treats MP4 as an H.264 file. WebM is purpose-built for royalty-free codecs - VP8 (rare in 2026), VP9 (mainstream), and AV1 (newest, highest compression).
When the decision is framed as "MP4 or WebM," the real decision is H.264 vs VP9 vs AV1 - which codec to encode. The container follows the codec. H.264 ships in MP4; VP9 and AV1 ship in WebM on the web.
Codec size comparison for the same visual quality
| Scenario | H.264 (MP4) | VP9 (WebM) | AV1 (WebM) |
|---|---|---|---|
| 1080p 30fps 60-second clip | ~12 MB | ~7 MB | ~5 MB |
| 720p 30fps 60-second clip | ~6 MB | ~3.5 MB | ~2.5 MB |
| Relative bitrate savings vs H.264 | 0% (baseline) | ~40% smaller | ~55% smaller |
| Encode time for 1 minute of 1080p | ~15 seconds | ~2-3 minutes | ~8-15 minutes |
| Playback CPU on mid-range laptop | Low (hardware decode) | Low (hardware decode) | Moderate (hardware decode patchy pre-2023 GPUs) |
Browser support reality in 2026
MP4/H.264 plays in 100% of shipping browsers - Chrome, Firefox, Safari, Edge, every mobile WebView. Has for a decade. If a video playing matters more than bytes saved, ship H.264.
WebM/VP9 plays in Chrome, Firefox, Edge, Opera, and Safari (since Safari 14, macOS Big Sur, 2020). Mobile Safari on iOS 14+ supports VP9. A very small residual audience on legacy iPhones below iOS 14 cannot decode VP9.
WebM/AV1 plays in Chrome 70+, Firefox 67+, and Edge 75+. Safari added AV1 support in 17.4 (2024). Hardware AV1 decode requires relatively new silicon - Intel 11th gen (Tiger Lake) or later, Apple M3 or later, AMD 6000 series or later. Pre-2022 devices fall back to software decode, which drains battery and can drop frames on 4K content.
The <source> fallback pattern
The canonical HTML5 video pattern serves a recommended codec the browser can decode and falls back down the list:
<video controls preload="metadata" poster="cover.jpg">
<source src="clip.av1.webm" type="video/webm; codecs=av01.0.05M.08">
<source src="clip.vp9.webm" type="video/webm; codecs=vp9,opus">
<source src="clip.h264.mp4" type="video/mp4; codecs=avc1.4D401F,mp4a.40.2">
<p>Your browser does not support HTML5 video.</p>
</video>The browser walks the <source> list top-down, picks the first type it recognises, and ignores the rest. Serving AV1 first captures the ~60% of 2026 devices that have hardware AV1 decode; VP9 catches most of the rest; H.264 guarantees 100% fallback.
The three real production decisions
The three real production decisions for MP4 vs WebM for web are hero autoplay, download compatibility, and archive masters - ship MP4 H.264 for reach, add WebM when you optimize Chrome-weight pages.
Decision 2 - Background hero video on a marketing site at 1080p, 15-second loop. → MP4 (H.264) + WebM (VP9). The VP9 file ships at ~60% of the H.264 size, which means a faster page load for visitors on slow connections. The H.264 file is the fallback for anyone whose browser skips WebM. Encode time is small (one-time, 15-second clip).
Decision 3 - Long-form streaming library (VOD service, course platform, 30+ minute videos). → AV1 (WebM) + VP9 (WebM) + H.264 (MP4). The AV1 files save substantial CDN egress at scale. The VP9 files cover every modern browser. The H.264 files are the universal fallback. Encode on GPU hardware or a batch pipeline; AV1's 10× encode time matters when the library has thousands of videos.
Encoding recipes
Encoding recipes on MP4 vs WebM for web: keep a short CRF ladder for H.264 MP4, export a VP9 WebM twin when page weight matters, and never publish only WebM without an MP4 fallback.
VP9 (WebM) - best compression/compatibility balance. Use two-pass encoding for consistent quality at a target bitrate. -c:v libvpx-vp9 -b:v 0 -crf 31 -row-mt 1 -c:a libopus -b:a 96k. The -row-mt 1 flag enables row-based multi-threading that cuts encode time roughly in half on modern CPUs.
AV1 (WebM) - maximum compression. SVT-AV1 is the encoder the industry settled on: -c:v libsvtav1 -crf 35 -preset 6 -c:a libopus -b:a 96k. Preset 6 is the default balance between speed and compression; lower presets (4, 5) favour quality at the cost of much longer encodes.
When to avoid WebM entirely
If your audience is primarily iOS < 14, older Android WebView, or legacy enterprise browsers, WebM offers no benefit - those devices will fall through to the H.264 source anyway, and the WebM encode is wasted effort. If the video is user-generated content that viewers often save, re-share, or edit, H.264 MP4 is the format they expect their tools to accept.
Email clients almost never render <video> natively. If the video is in an email newsletter, export a short animated GIF or an MP4 link to a landing page - neither WebM nor an inline HTML5 video tag help.
Converting between formats
Converting between formats for MP4 vs WebM for web: open Video Converter, pick the target container, and re-check audio - a silent WebM still needs an MP4 twin for Safari users.
Related tools
- Video Converter - MP4, WebM, MOV conversion in-browser.
- FFmpeg Online - command-line FFmpeg in the browser.
- Video Maker - stitch images into a video clip.
- Compress Image - reduce cover-image file size.
Related guides
- MP4 vs MOV vs MKV - which container when - choosing between the three common containers for different production pipelines.
- Before a video call - which tools to run - pre-call checklist for screen, camera, and microphone readiness.
Why trust these tools
- Ten-plus years of web tooling. The freetoolonline editorial team has shipped browser-based utilities since 2015. The goal has never changed: get you to a working output fast, without an install.
- No install, no sign-up. Open a tool and get a working output in seconds - nothing to download and no account to create. Tools that need heavy processing run it on our service, so even a low-powered machine gets the job done.
- Analytics stops at the page view. We measure which pages get visited, not what you type or upload inside a tool. There is nothing to sign in to and no profile is attached to your input.
- Open-source core components. The processing engines underneath (libheif, libde265, pdf-lib, terser, clean-css, ffmpeg.wasm, and others) are public and audit-able. We link to each one in its tool page's footer.
- Free, with or without ads. All tools are fully functional without sign-up. The Disable Ads button in the header is always available if you need a distraction-free run.