WebM vs MP4: which video format to use, and when

WebM and MP4 are both video containers. Use MP4 when one file must play everywhere; add WebM (AV1 or VP9 with Opus) as an open, royalty-free option.

5 min readSume
All posts

WebM and MP4 are both video containers, so the real difference is the codecs inside them and who can play them. MP4 is the safe choice when you can ship only one file: an MP4 with H.264 video and AAC audio plays in every major browser. WebM is an open, royalty-free format made for the web, carrying VP8, VP9, or AV1 video with Opus or Vorbis audio. MDN suggests offering WebM as the first choice with an MP4 fallback.

The format facts come from MDN's container and video codec guides, The WebM Project, and Shopify Help's product media types page, read on 2026-09-28. What Sume returns comes from the Timeline 1.0 docs and current Sume code.

What is the difference between WebM and MP4?

Both files are wrappers around separately compressed video and audio streams. What codec does MP4 use? explains the container-versus-codec split; this table compares the two containers.

From MDN containers, MDN video codecs, and The WebM Project, read 2026-09-28.
CompareMP4 (.mp4)WebM (.webm)
Based onThe ISO base media file format, derived from Apple's QuickTime formatThe Matroska container
Video codecsAVC (H.264), AV1, VP9, and othersVP8 and VP9 (required); MDN also lists AV1
Audio codecsAAC, MP3, FLAC, OpusVorbis and Opus (required)
LicensingMDN tells you to check license requirements for AVCOpen, royalty-free
Browsers (container)All browsersAll browsers
MIME typesvideo/mp4, audio/mp4video/webm, audio/webm

Which is better for a website, WebM or MP4?

Neither container is better on its own; the codec pick decides the trade-off. For a typical website where videos demonstrate products, MDN recommends two options. First, WebM with AV1 video and Opus audio: open and royalty-free, and generally well supported, except by Safari on older Apple devices. Second, MP4 with H.264 and AAC, which MDN calls broadly supported by every major browser.

If you can offer only one file, MDN's container guide says to choose the format available on the broadest selection of devices and browsers, such as MP4. If you can offer two, list both in a <video> element: the browser plays the first source it can and falls back to the next, as in MDN's example:

<video controls>
  <source type="video/webm; codecs=av01,opus" src="product.webm" />
  <source type="video/mp4" src="product.mp4" />
</video>

Are WebM files smaller than MP4 files, or sharper?

Not by itself. Size and quality come from the codec and its settings, and MDN's tables show an MP4 can hold AV1, VP9, and Opus too. MDN describes WebM as a container that offers efficient compression. To compare fairly, encode the same source with the same codec family at the same bitrate and look at both files.

Should I upload WebM or MP4 to a store or social platform?

Use the file types the platform's own upload page lists, and check what it does with them. Shopify, for example, takes .webm uploads but says it converts and serves all videos as .mp4 or HLS for compatibility, so a WebM upload is not what shoppers receive. What sizes Shopify accepts for product media lists its other upload limits.

Can I get a WebM file from Sume?

Not directly. Sume's docs describe MP4 output (Timeline 1.0 returns one MP4) and list no WebM option; in current code a Timeline render is H.264 video with AAC audio. Which codecs Sume's MP4 files use and Sume API output formats cover each endpoint.

For a WebM copy next to the MP4, download the MP4 and encode it yourself. FFmpeg's codec docs list libvpx for VP8/VP9 video and libopus for Opus audio. MOV vs MP4 covers the other common comparison.

Sources

Related posts

More in Media tools

All Media tools posts

Written by Sume