How to Compress Video for Websites Without Losing Quality
- Difficulty
- Moderate
- You need
- The finished master and an encoder
- Browser support checked
- October 18, 2026
On this page
To compress video for a website, start from the finished master and make the smallest file that still looks right at the size it plays. Trim it, scale it to the player, remove the audio from silent loops, encode with a quality-based setting, and offer an MP4 plus an optional WebM. Then add a poster image and control how the browser loads it. This guide is part of our video production guide.
You'll need the master file, an encoder that exports MP4 and WebM, and access to the page's HTML or your site builder's video settings. Browser support below was checked against MDN on October 18, 2026.
Why web video needs its own export
A file made for YouTube or a client review isn't a good file for a web page. Platforms take a high-bitrate upload and make their own streaming versions. On your own site, the file you upload is the file every visitor downloads, over whatever connection they have.
That changes the goal. Instead of the highest quality the platform will accept, you want the smallest file that still looks right at the size it actually displays. A background loop shown at half the screen width doesn't need 4K detail, a soundtrack or a long running time. Every unneeded pixel, second and audio track is data your visitors pay for in loading time.
Formats and codecs for the web
Browsers don't all support the same codecs, so most sites offer two sources and let the browser pick the first one it can play.
| Format | Codec | Browser support |
|---|---|---|
| WebM | AV1 | All major browsers; Apple devices need a hardware decoder |
| WebM | VP9 | All major browsers |
| MP4 | H.264 | All major browsers; the safest fallback |
| MP4 | HEVC (H.265) | Depends on the device and its hardware |
Steps
- Decide what the video is for.
A silent background loop, a product clip that plays on click and a long interview each need different treatment. Loops should be short, silent and small. Click-to-play clips need sound, controls and a poster. Long videos with sound are often better hosted on a video platform and embedded. Decide this first, because it sets every other choice below.
- Trim it and size it to the player.
Cut the clip to the shortest length that does the job; a loop rarely needs to run long. Then scale the frame to the largest size it will display on the page, not the size you shot. MDN notes that shrinking the frame before encoding, such as 1080p to 720p, can give a smaller file that looks better than heavily compressing the full-size version.
- Remove the audio from silent loops.
If the video will play muted, delete the audio track rather than just muting it in the page. A silent track still takes space in every copy a visitor downloads. Keep audio only on videos the visitor chooses to play, where they expect sound and controls.
- Encode with a quality-based setting.
Most encoders offer a constant quality mode, often called CRF, that aims for a consistent look and lets the file size follow. It's usually a better fit for web clips than a fixed bitrate. Start at a moderate setting, export, check the result at full size, then step the quality down until you see artifacts and step back up one. Clips with lots of motion or grain need more data.
- Make an MP4 and, optionally, a WebM.
Export an MP4 with H.264 video, which plays in every major browser. For smaller files, also export a WebM with AV1 or VP9. List the WebM source first and the MP4 second: browsers use the first source they can play, so order matters. Check that your server sends the correct file types, because MDN warns that a wrong one can stop the video playing.
- Add a poster image.
A poster is the still image shown before the video plays. Pick a clear, representative frame, export it as a compressed image at the player's size and add it with the poster attribute. Google also uses the poster as one way to choose a video's thumbnail in search. Leave the poster off GIF-style loops that start immediately, because it would download for nothing.
- Control how the video loads.
For click-to-play videos, set preload to none so the browser doesn't fetch video data until someone presses play, and add loading="lazy" where browsers support it so the poster waits until the player is near the screen. Set width and height to reserve space. Don't lazy-load a video that's the largest element at the top of the page; preload its poster instead.
- Autoplay only muted, inline loops.
Browsers block autoplay with sound, and Chrome's policy says muted autoplay is always allowed. For a loop, use the autoplay, muted, loop and playsinline attributes together; web.dev notes that playsinline is needed for autoplay on iOS. Even then, don't assume it will play: show a still or a play button if it doesn't. Give visitors a way to pause long loops.
- Add captions and test on a slow connection.
For videos with speech, add a WebVTT captions file with a track element, covering speech and meaningful sounds. Then load the page with your browser's developer tools set to a slow mobile connection. Check how quickly the poster appears, whether the layout stays still, and how long the video takes to start. Compare the file sizes before and after.
If you'd rather get web-ready files with the edit, our in-house video production team shoots, edits and delivers video sized for where it will play, with no handoffs.
Markup for the two common cases
Here's a silent, GIF-style loop that autoplays. It has no controls and no poster, and the WebM source comes first:
<video autoplay muted loop playsinline width="960" height="540">
<source src="/media/hero-loop.webm" type="video/webm">
<source src="/media/hero-loop.mp4" type="video/mp4">
</video>And here's a click-to-play video with sound. It shows a poster, loads nothing until it's needed and carries a captions track:
<video controls preload="none" loading="lazy" width="960" height="540"
poster="/media/interview-poster.jpg">
<source src="/media/interview.webm" type="video/webm">
<source src="/media/interview.mp4" type="video/mp4">
<track kind="captions" src="/media/interview.vtt" srclang="en"
label="English" default>
</video>Self-hosted file or video platform?
Self-hosting works best for short clips you control completely: background loops, product spins and short demos. The files are small, there's no third-party player, and the design stays clean.
For longer videos with sound, a video platform is often the better host. It streams at different sizes for different connections and devices, which a single self-hosted file can't. Google says it may index an embedded video both on your page and on the platform's own page.
If a video matters for search, give it a dedicated page where it's the main content, with its own title and description. For images on the same pages, see our image optimization guide, and for video on social feeds, see our short-form video strategy.
Troubleshooting
The video won't autoplay on phones
Cause: the video isn't muted or is missing the playsinline attribute, which web.dev says iOS needs for autoplay. Browsers also decide for themselves, and Chrome's own guidance is never to assume a video will play, so some devices and settings will block it whatever the markup says. A script that changes the video after the page loads can also remove the attributes that allowed autoplay.
Fix: add muted and playsinline alongside autoplay, and remove the audio track from the file itself so nothing can unmute it. Check that no script changes those attributes. Accept that some devices will still block autoplay, and design for it: show a still frame or a play button when the video doesn't start. Never put essential information only in an autoplaying loop, because some visitors won't see it move.
The page jumps when the video loads
Cause: the video element has no width and height, so the browser doesn't know how much space to reserve until the file or poster arrives. When it does, the content below shifts down. Lazy-loaded videos without dimensions are worse, because MDN notes they may have no size at all until they load.
Fix: set width and height attributes that match the video's aspect ratio, or reserve the space with CSS aspect-ratio. Make sure the poster has the same aspect ratio as the video, so nothing jumps when playback starts. Recheck on a narrow phone screen, where layout shifts are most noticeable, using the browser's developer tools with a slow connection.
The compressed video looks blocky or banded
Cause: the quality setting is too aggressive for the content. Smooth gradients, such as skies and studio backgrounds, show banding, while fast motion, water, foliage and film grain break into blocks. Compressing a file that was already compressed, such as a downloaded review copy, makes both problems worse because the artifacts get encoded again.
Fix: encode from the master, not a compressed copy. Raise the quality setting a step at a time until the artifacts disappear at full size. If the file gets too big, shorten the clip or reduce the frame size instead of lowering quality further. For loops, choosing a calmer section of footage often saves more than any setting.
Common questions
What is the best video format for websites?
There isn't one format that wins everywhere, so most sites offer two. An MP4 file with H.264 video plays in every major browser, which makes it the safe fallback. A WebM file with AV1 or VP9 is usually smaller at similar quality, but AV1 needs a hardware decoder on Apple devices. List the WebM source first and the MP4 second.
Should I host video on my own site or embed it from YouTube?
Short, silent background loops are usually best self-hosted, because they're small and need no player. Longer videos with sound are often easier to embed from a video platform, which handles streaming, sizes and devices for you. Google says it may index an embedded video both on your page and on the platform. Either way, give each important video a page of its own.
Does video slow down a website?
It can, if the browser downloads a large file the visitor never watches. Size the video to the player, compress it, add a poster image and tell the browser not to preload the whole file. Avoid autoplaying long videos. A well-compressed loop is usually far lighter than the animated GIF it replaces, and a video that loads on demand costs nothing until someone presses play.
Is it better to replace animated GIFs with video?
Usually, yes. Google's web.dev guide recommends converting large animated GIFs to video, because a video of similar quality is typically far smaller. To make the video behave like a GIF, give it the autoplay, loop, muted and playsinline attributes, and offer WebM and MP4 sources. Leave off the poster in that case, because the video starts straight away.