The short version: use WebM when you are serving video from a website you control, and MP4 for absolutely everything else. The longer version is worth understanding, because the two formats fail in different ways.
They are containers, not codecs
Neither WebM nor MP4 compresses anything. Both are containers — boxes holding a video stream, an audio stream and synchronisation data. What matters is what is inside:
- WebM almost always holds VP9 or VP8 video with Opus or Vorbis audio.
- MP4 almost always holds H.264 video with AAC audio.
When people compare the two formats, they are really comparing VP9 against H.264.
File size and quality
VP9 is the newer and more efficient codec. For visually equivalent output it typically produces files 25 to 35 percent smaller than H.264. On flat, graphic content such as screen recordings and animation the gap widens further; on grainy, detailed live footage it narrows.
This does not mean WebM looks better. It means WebM reaches the same appearance with fewer bytes. At identical file sizes, a WebM will usually look slightly better; at identical quality settings, it will simply be smaller.
Compatibility, where MP4 wins outright
MP4 with H.264 is supported by every browser, every phone, every desktop operating system, every smart TV, every games console and every video editor in professional use. Hardware decoders for H.264 have been built into consumer chips for two decades.
WebM is supported by Chrome, Edge, Firefox, Android and — partially, and only recently — Safari. Outside a browser its support is thin. This single fact governs most real decisions about which format to use.
Battery and processor cost
A phone decoding H.264 uses a fixed-function block designed for exactly that job, which is efficient enough that it barely registers. VP9 hardware decoding exists on newer chips but is far from universal, so many devices fall back to software decoding. On a long video, that difference is visible in battery life and heat.
Editing
Neither is a good editing format — both are long-GOP delivery codecs that force an editor to reconstruct frames from neighbours during scrubbing. But MP4 is at least accepted. Premiere, Final Cut and Resolve import H.264 without complaint and refuse or mishandle VP9. For serious work, transcode to an intermediate codec like ProRes or DNxHD first.
Serving both, which is what large sites do
You do not have to choose. List both sources and let each browser take what it understands:
<video autoplay muted loop playsinline>
<source src="clip.webm" type="video/webm">
<source src="clip.mp4" type="video/mp4">
</video>Browsers evaluate the sources in order and use the first they can play, so Chrome and Firefox take the smaller WebM while Safari falls through to the MP4. This is the standard pattern for background and hero video.
A decision table
| What you are doing | Format |
|---|---|
| Background or hero video on your site | WebM, with an MP4 fallback |
| Sending a file to a colleague or client | MP4 |
| Uploading to a form or portal | MP4 |
| Importing into an editor | MP4, or an intermediate codec |
| Video with a transparent background | WebM (VP9 supports alpha) |
| Playing on a TV, console or older phone | MP4 |
| Long-term archiving | MP4 |