What Is a Codec? Choosing a Video Format for the Web

A codec is the method that compresses (encodes) video and audio data and decompresses (decodes) it again for playback; the name comes from "coder-decoder." Here's why the question "what is a codec?" matters to a website owner: the same video can differ several times over in size depending on the codec and settings chosen, and it may not play at all in some browsers. In this article, we explain the difference between a codec and a file format, and the sensible choices for your website.

What is a codec?

Raw (uncompressed) video is huge. In MDN's example, an uncompressed two-hour movie takes up about 1.79 TB. Codecs shrink this data by discarding details the human eye won't notice, or will barely notice, and by cleverly storing what repeats between frames.

There's a balance between compression and quality. As MDN notes, as the bitrate (the amount of data used per second) goes up, quality generally goes up too, but so does file size. How efficient a codec is depends on how low a bitrate it can deliver the same quality at.

The logic of lossy and lossless compression in images applies to video as well. We covered this in our article on lossy and lossless compression.

The difference between a codec and a file format (container)

This is the most commonly confused point. Saying "our video is an MP4" doesn't tell you which codec the video was compressed with.

• Container: As MDN defines it, a file format that stores one or more media streams (video, audio) together with their metadata. .mp4, .webm and .mov are containers.
• Codec: How the video and audio data inside the container is compressed.

An analogy: the container is a shipping box, and the codec is how the items inside are packed. The same MP4 box can contain video compressed with H.264, H.265 or AV1. To play a file, a browser has to support both the container and the codec inside it.

Common video codecs on the web

On the audio side, the common choices for the web are AAC (usually in MP4) and Opus (usually in WebM).

Which codec should you choose for your website?

MDN's recommendation has two tiers:

1. The modern, efficient option: AV1 video and Opus audio in a WebM container. These are open, royalty-free formats and are generally well supported, except on older Apple devices.
2. The fallback (broad compatibility): H.264 video and AAC audio in an MP4 container. According to MDN, this combination is supported in all major browsers.

If you're only going to prepare one file, MDN recommends the format that will play on the widest range of devices, which is MP4.

If you prepare two sources, the browser picks the first one in the list that it can play:

“html <video controls poster="kapak.webp" preload="metadata"> <source src="tanitim.webm" type="video/webm; codecs=av01,opus"> <source src="tanitim.mp4" type="video/mp4"> </video> “

How video affects your site

Video can be the heaviest element on a web page. Choosing the right codec matters, but it isn't enough on its own.

• Preload setting: The preload attribute gives the browser a hint about how much to download in advance. none downloads nothing, metadata fetches only information such as duration, and auto allows the whole file to be downloaded. If visitors won't always watch the video, metadata or none is the better fit.
• Poster image: Set an image to display until the video loads. Otherwise, an empty area appears until the first frame arrives.
• Autoplay: Browsers usually block autoplay with sound. As MDN recommends, use muted and playsinline along with autoplay for background videos, and show a play button if autoplay is blocked.
• Video instead of animated GIFs: In web.dev's example, a 3.7 MB GIF drops to 551 KB as MP4 and 341 KB as WebM. For short looping animations, using video with the autoplay loop muted playsinline attributes can make the page noticeably lighter.
• The right resolution: Don't upload a 4K file for a background video that will display 400 pixels wide on mobile.
• Traffic: Video files eat through your hosting traffic quickly. We covered this in our article What is bandwidth?, and serving static files from servers close to the visitor in What is a CDN?

Your own server or a video platform?

For long promotional films, training videos and interviews, platforms such as YouTube or Vimeo handle codec conversion, multiple resolutions and quality adjustment based on connection speed for you. However, embedded players add their own scripts to the page. In the example in Chrome's Lighthouse documentation, a YouTube player weighs about 540 KB, while a lightweight preview (a "facade") put in its place weighs 3 KB. That's why, for embedded videos, using a preview that only loads the player when the visitor clicks makes the page lighter.

For short, silent, looping background videos or product animations, serving well-compressed files from your own site is usually more practical.

Common mistakes

• Uploading the file straight out of the camera or editing software. These files often have a higher bitrate than the web needs.
• Providing only an HEVC or only an AV1 source. On some devices, the video may not play at all. Always add a broadly compatible fallback source.
• Assuming the .mp4 extension is enough. The extension tells you the container, not the codec.
• Relying on autoplay with sound. Browsers may block it, and it annoys visitors.
• Putting a heavy video in the hero area. It can delay how long it takes for the page's main content to appear (LCP). We explained these metrics in our article What are Core Web Vitals?

Our experience

In web and social media projects, we prefer to prepare video separately for each place it will be used: in the format the platform expects for social media, and at a resolution and bitrate that won't weigh the page down for the website. When we improved mobile PageSpeed on our own site, we also dealt with off-screen animations. That's why, when we add video or moving elements to a page, we factor in their effect on page speed from the start.

Frequently asked questions

Conclusion

A codec determines how much space your video takes up and which devices can play it. The safe path for the web is to offer a broadly compatible MP4 (H.264 + AAC) source and, if possible, add a more efficient WebM/AV1 source. Round this out with the right preload setting, a poster image and the right resolution, and video does its job without weighing your site down.

If you'd like to plan video use on your website or social media accounts together, take a look at our web design and social media design services, or get in touch.