There is no single best video format for the web, because the right answer depends on who is watching and how much you care about bandwidth. But the field narrows quickly. In practice you are choosing between three real options: MP4 carrying the H.264 codec, WebM carrying VP9, and the newer AV1 codec. Everything else, from AVI to MOV to WMV, is a working format you should convert away from before it ever hits a web page.
This guide explains what actually separates these three, when the smaller file is worth the trade, and why almost every well built site still ships an MP4 no matter what else it offers. It also covers the mechanism underneath, because once you know how a codec compresses motion, the size and support trade-offs stop feeling arbitrary.
Container versus codec, the thing people mix up
A video file has two parts that people constantly confuse. The container is the wrapper, the file extension you see, like .mp4 or .webm. It holds the streams and the metadata that tells a player how to find and synchronize them.[2] The codec is the compression method used on the actual picture inside, like H.264, VP9, or AV1. The container decides what plays; the codec decides how small and how sharp the file is.
This matters on the web because browser support is really about the codec, not just the extension. An MP4 almost always means H.264, which every browser decodes. A WebM usually means VP9. AV1 can live inside either an MP4 or a WebM container, which is why you sometimes see it both ways. When you pick a format for the web, you are really picking a codec and then wrapping it in the container that browsers expect. The preservation catalogs that track these formats describe them the same way, as a container specification separate from the coded streams it carries.[1]
MP4 plays everywhere. WebM and AV1 give you smaller files but need a fallback for the oldest devices. That single fact drives every decision below.
How video codecs compress motion
The reason a minute of high-definition video can fit in a few megabytes is that a codec almost never stores full frames.[4] Instead it stores a small number of complete keyframes, called I-frames, and then for the frames in between it stores only what changed. Predicted frames, called P-frames, record the difference from an earlier frame, and bidirectional frames, called B-frames, are reconstructed from frames on both sides. Because most of a video frame is nearly identical to its neighbors, this inter-frame prediction removes an enormous amount of redundancy that an image-by-image format like an animated GIF is forced to keep.
The cleverest part is motion compensation. Rather than recording that a block of pixels changed, the codec records that a block moved, storing a compact motion vector that says "this patch is the same as a patch over there in the previous frame, shifted by this much." A panning shot or a walking figure compresses extraordinarily well because the codec describes the movement instead of redrawing the pixels. On top of this, each stored difference is run through a lossy frequency transform much like the one JPEG uses for still images, discarding fine detail the eye barely resolves. Newer codecs are better precisely because they predict motion in finer detail and transform the residuals more cleverly: VP9 improves on H.264, and AV1 improves again on VP9, which is why each generation reaches a smaller file at the same visible quality.
The three formats worth shipping
MP4 with H.264 is the universal baseline. It plays on every browser, phone, smart TV, and old tablet you can name, and hardware decoding is built into practically all of them, so playback is smooth and battery friendly. Its only weakness is efficiency: for the same visual quality, an H.264 file is larger than the newer codecs.
WebM with VP9 is the practical upgrade. VP9 delivers roughly the same quality as H.264 at a noticeably smaller size, and it is supported in Chrome, Firefox, Edge, and modern versions of Safari. It is royalty free, developed openly rather than under the patent-licensing pools that cover H.264, which is a large part of why major video platforms lean on it so heavily.[2] The cost is slower encoding and slightly less universal hardware decoding than H.264.
AV1 is the efficiency champion. It squeezes files smaller than VP9 at the same quality, which is a real win on video heavy pages where bandwidth is the bottleneck. Developed by the Alliance for Open Media as a royalty-free successor to VP9, it represents the current state of the art in open web codecs. The catch is that AV1 encoding is slow and computationally heavy, and hardware decoding is only common on recent devices. On an old phone, AV1 may fall back to software decoding, which drains battery and can stutter.
Side by side comparison
| Format and codec | Browser support | File size at equal quality | Best for |
|---|---|---|---|
| MP4 / H.264 | Universal | Largest | A safe default and fallback that always plays |
| WebM / VP9 | Broad, all modern browsers | Smaller | Cutting bandwidth without giving up compatibility |
| AV1 | Recent browsers and devices | Smallest | High traffic pages where every megabyte counts |
The HTML video element can list several sources. Put your AV1 or WebM first and your MP4 last, and the browser plays the first one it understands. That gives modern visitors the small file and everyone else the reliable one.
Bitrate, resolution, and what really sets size
The codec you choose sets the efficiency ceiling, but the two settings that actually determine a web video's file size are bitrate and resolution. Bitrate is how many bits the codec is allowed to spend per second of video, and it is the single most direct control over size: a clip at four megabits per second is roughly half the size of the same clip at eight, and often indistinguishable if the content is not too demanding. Resolution sets how many pixels each frame contains, so dropping from 1080p to 720p removes more than half the pixels the codec has to describe and lets a lower bitrate look clean.
The practical order of operations mirrors the one for images. First set the resolution no larger than the video will actually be displayed at, because there is no point encoding pixels the page will shrink away. Then choose a bitrate that looks clean for that resolution and content, using a variable-bitrate mode so calm scenes spend fewer bits and busy scenes spend more. Only after the file is sensibly sized does the codec comparison in this guide matter, because format choice decides how much quality you keep at a given size, not whether the size was reasonable to begin with. Comparing a bloated H.264 file against a well-tuned VP9 one tells you nothing useful.
How to pick for your page
If you can only ship one file, ship MP4
An MP4 with H.264 will play for every visitor with zero fallback logic. When simplicity matters more than saving bandwidth, this is the whole answer. See how to convert MOV to MP4 if your source came off a phone or camera.
If bandwidth matters, add WebM
Offer a WebM version alongside the MP4. Most of your visitors get the smaller VP9 file, and the rest fall back to MP4 automatically. This is the sweet spot for most sites.
If you serve a lot of video, evaluate AV1
On pages where video is the product and traffic is high, AV1 can meaningfully cut your bandwidth bill. Keep the MP4 fallback, accept the slower encode, and test playback on a low end phone before you commit.
Compress before you compare
Format choice only matters after the file itself is reasonable. Run the source through the video compressor or read how to compress an MP4 so you are comparing sensible files, not bloated ones.
The audio track and other practical details
Video files also carry an audio stream, and it is worth encoding it sensibly rather than leaving it at whatever the source used.[2] Inside an MP4 the audio is almost always AAC, which every browser plays; inside a WebM it is typically Opus or Vorbis. For most web video, AAC or Opus at a moderate bitrate is inaudible from the original and keeps the file honest. Two smaller details save real bytes and grief. First, if a clip is decorative and silent by design, remove the audio track entirely rather than shipping a silent one that still costs space. Second, place the file's index at the front so playback can begin before the whole file downloads, which is the difference between a video that starts instantly and one that stalls; most encoders offer this as a fast-start or web-optimized option.
Finally, remember that these formats are the delivery end of a pipeline. Whatever your source came from, a phone, a screen recorder, or an editing suite, converting it once to a clean web codec at a sensible resolution and bitrate is what makes the format comparison in this guide meaningful. Ship the wrong container and it will not play; ship a bloated file and no codec will save it.
Silent autoplay clips and looping backgrounds
A special case worth calling out: short silent clips used as backgrounds or autoplay loops. These do not need audio and are usually only a few seconds long, so WebM with VP9 or AV1 shines here because the savings compound across every page load. Strip the audio track from these entirely, since it is dead weight, and keep the clip short so it loops seamlessly. If you were reaching for an animated GIF for this, stop. A short muted MP4 or WebM is smaller and sharper than the same loop as a GIF, every single time, because a real codec predicts motion between frames while a GIF stores every frame as a full 256-color image. GIF made sense before browsers could autoplay silent video; today it rarely does.
Convert your video for the web now
Export MP4, WebM, or another web ready format right in your browser, with nothing uploaded to a server.
Key takeaways
- The real choice is a codec: H.264, VP9, or AV1, wrapped in an MP4 or WebM container.
- MP4 with H.264 plays everywhere and should always be your fallback.
- WebM with VP9 is the practical upgrade: smaller files, broad support.
- AV1 is smallest but slow to encode and best on high traffic pages with modern visitors.
- For silent loops and backgrounds, a muted MP4 or WebM beats a GIF on both size and sharpness.