H.264 vs WebM vs AV1: Which Video Format Should You Use on the Web in 2026?

Choosing a video format for your website shouldn't require a PhD in codec engineering. But with three viable options (H.264 (MP4), VP9 (WebM), and AV1), the decision isn't always obvious.

Here's the practical breakdown, without the codec wars drama.

The three contenders

H.264 (MP4)

The veteran. H.264 has been the web's default video codec since the early 2010s. It's wrapped in an MP4 container and plays everywhere.

• Browser support: 99%+ globally. Every browser, every device, every platform.
• Hardware decoding: Universal. Even budget phones have dedicated H.264 decode chips.
• Encoding speed: Fast. Real-time encoding is trivial on modern hardware.
• File size: Good, but not the smallest. At equivalent quality, H.264 files are roughly 30-50% larger than AV1.

VP9 (WebM)

Google's answer to H.264. VP9 ships in a WebM container and offers better compression than H.264 at the cost of slower encoding.

• Browser support: ~96%. Supported in Chrome, Firefox, Edge, and Safari (since 2020). Gaps remain on some older iOS devices.
• Hardware decoding: Widespread but not universal. Most devices from 2018+ support it.
• Encoding speed: Slow. VP9 encoding takes 5-10x longer than H.264.
• File size: About 30% smaller than H.264 at equivalent quality.

AV1

The newest option, developed by the Alliance for Open Media (Google, Apple, Mozilla, Microsoft, Netflix, and others). AV1 promises the best compression available.

• Browser support: ~92%. Chrome, Firefox, Edge, and Safari 17+. Older Safari versions and some mobile browsers lack support.
• Hardware decoding: Growing. Recent chips (Apple M3+, Intel 12th gen+, AMD RDNA 3+) support it. Older devices rely on software decode, which drains battery.
• Encoding speed: Very slow. AV1 encoding can take 20-50x longer than H.264.
• File size: 40-50% smaller than H.264 at equivalent quality. The best compression of the three.

Side-by-side comparison

	H.264 (MP4)	VP9 (WebM)	AV1
Browser support	99%+	~96%	~92%
Hardware decode	Universal	Widespread	Growing
Relative file size	1x (baseline)	~0.7x	~0.5-0.6x
Encoding speed	Fast	Slow	Very slow
Licensing	Royalty-bearing (but free for web use)	Royalty-free	Royalty-free
Best for	Maximum compatibility	Balance of size and support	Smallest files when support isn't critical

So which one should you use?

Use H.264 if...

• You need it to work everywhere. No exceptions. No fallbacks. Every browser, every device, every quirky corporate network that blocks WebM for no reason.
• You're embedding short clips like hero sections, product demos, or background loops where the file size difference between H.264 and AV1 is a few hundred KB.
• You want fast encoding. If you're compressing dozens of videos regularly, H.264's speed advantage matters.
• You're serving video through a CMS or platform that may re-encode your uploads. Starting with H.264 avoids compatibility issues.

For most websites in 2026, H.264 is still the pragmatic default.

Use VP9 if...

Honestly, VP9 occupies an awkward middle ground in 2026. It's better than H.264 on compression but worse than AV1, and its encoding speed isn't great either. The main reason to use VP9 today is if you're already in the Google ecosystem (YouTube uses VP9 extensively) or if you need better compression than H.264 with broader support than AV1.

Use AV1 if...

• You're serving long-form video where the 40-50% file size reduction adds up to real bandwidth savings.
• You can provide a fallback. The <source> element makes it easy to serve AV1 with an H.264 fallback.
• You're targeting modern browsers and can accept that ~8% of users will get the fallback.
• Encoding time isn't a concern. If you compress once and serve forever, the slow encode is a one-time cost.

The fallback pattern

You don't have to choose just one. The <video> element tries sources in order and uses the first one the browser supports:

<video width="1280" height="720" playsinline>
  <source src="video.av1.mp4" type="video/mp4; codecs=av01.0.05M.08">
  <source src="video.mp4" type="video/mp4">
</video>

Modern browsers get the smaller AV1 file. Everything else gets the H.264 version. The downside? You need to encode and host two versions of every video.

What about WebP video and animated WebP?

Short answer: don't. WebP is an image format. While it supports animation, it's not a video codec and shouldn't be used for video content. Use actual video formats for video.

The codec nobody's talking about: H.265 (HEVC)

H.265 offers compression similar to VP9 and is widely used in streaming (Netflix, Apple TV+). However, it's patent-encumbered with complex licensing, and browser support is inconsistent outside of Safari. Chrome and Firefox don't support it. For web use, skip H.265 entirely.

Practical recommendations

For a typical website with a few embedded videos:

1. Compress to H.264 MP4 with a CRF of 23-28
2. Strip audio if the video plays muted (hero sections, backgrounds)
3. Downscale to 720p or 1080p: 4K video on the web is almost always overkill
4. Add a poster image for instant visual feedback
5. Optionally provide an AV1 version for bandwidth-sensitive scenarios

Don't overthink it. A well-compressed H.264 file will serve 99% of websites perfectly well. Save the AV1 optimization for when you're serving video at scale.