WebM File
Definition
Google introduced WebM in 2010 as a deliberately unencumbered alternative for web video; the container is a trimmed-down Matroska, the extension is .webm and the MIME type is video/webm. VP9, the codec most WebM files use today, is typically 25 to 35 percent smaller than H.264 at equivalent quality, and AV1 in the same container goes further still. Support is broad but arrived late in one place: Chrome, Firefox, Edge and Android have handled VP9 for years, while Safari only added it in version 14 in 2020 and AV1 in version 17 on hardware that supports it. WebM can also do something MP4 cannot do in any widely supported way — carry an alpha channel, so a video can have genuine transparency over a page background.
Why It Matters
The saving is worth having on anything people actually watch. A two-minute 1080p clip lands around 24 MB as H.264 at CRF 23 and around 16 MB as VP9 at CRF 32, which is a third off every view. Because Safari was late, the usual pattern is to publish both and let the browser choose, which costs a second encode and roughly double the storage — a fair trade for a clip that will be fetched thousands of times, less obviously worth it for one internal recording. A short silent WebM is also a far better animated GIF than a GIF is: same effect, full colour, a fraction of the bytes.
How It Works
The usual encode is ffmpeg -i input.mov -c:v libvpx-vp9 -crf 33 -b:v 0 -row-mt 1 -c:a libopus -b:a 96k output.webm, where -b:v 0 puts the encoder into constant-quality mode and -row-mt 1 lets it use more cores. Expect it to be several times slower than an x264 encode of the same footage; that is the main practical cost. In the page, a video element takes two source children with type attributes, the WebM first and the MP4 second, and the browser plays the first one it understands without downloading the other. The host has to send video/webm for the file and answer Range requests so the viewer can seek; both are standard on any static host, and no server-side processing is involved because the decision is made in the browser.
Real-World Example
A cafe publishes a one-page site on 99helpers at cafe-site.99helpers.site with a ten-second looping background clip. The H.264 MP4 is 6.1 MB; the VP9 WebM of the same footage is 3.4 MB. Both are uploaded, the WebM is listed first, and most visitors pull the smaller file while anyone on an older iPhone still sees the loop. Muting the clip and adding the playsinline attribute is what keeps it playing inline on mobile rather than jumping to full screen.
Common Mistakes
- ✕Publishing only a WebM — visitors on older Safari get a player that never starts, with no error to explain why
- ✕Comparing CRF numbers between codecs — CRF 23 in x264 and CRF 23 in libvpx-vp9 are not the same quality at all, so judge by eye
- ✕Encoding a long video at default single-threaded settings — the job takes hours where a few flags would have made it minutes
- ✕Serving the file with the wrong Content-Type — a WebM labelled as application/octet-stream downloads instead of playing
Related Terms
MP4 File
An MP4 file is a container holding compressed video and audio together, most often H.264 video with AAC audio. It is the safest video file to put on a web page.
GIF File
A GIF file is a palette-based image limited to 256 colours per frame, best known for short looping animations. For anything longer than a second or two, a video file does the same job at a fraction of the size.
AVIF File
AVIF is an image format built from the still-frame coding of the AV1 video codec. It generally beats WebP by another 20 percent or so at matching quality, at the cost of much slower encoding.
Captions
Captions are time-synchronised text for a video's audio: the dialogue, who is speaking, and any sound that carries meaning. They are not subtitles, which assume the viewer can hear and only translate the words.
MIME Type
A MIME type, also called a media type or content type, is the short label a server sends to say what kind of data a response contains — text/html, image/png, application/pdf. The browser decides what to do with the bytes based on that label, not on the file name.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →