tinyvid.dev
Guide · compression

How to compress video for the web

Big video files are one of the quickest ways to slow a page down. This guide covers how to compress video for the web properly — which codec to choose, how bitrate and resolution decide the size, and how to embed the result — then lets you do it right here, free up to 200 MB.

01Why it matters

Why compress video for the web?

Raw video straight from a camera, phone or screen recorder is built for editing, not for the web. A single clip can weigh tens or hundreds of megabytes — far more than a page should ever ship. Every one of those bytes has to reach the visitor before the video can play, and on mobile data that is both slow and expensive.

Heavy video is one of the biggest drags on Core Web Vitals. An oversized file above the fold pushes out Largest Contentful Paint, and a player that resizes as it loads hurts Cumulative Layout Shift — both are ranking signals Google measures on real visitors. Compressing the file, setting explicit dimensions and deferring off-screen video keeps those scores green.

Compression is simply re-encoding the video with a modern codec at a sensible quality and resolution for on-screen playback. Done well it cuts the file by 70 to 95% while looking almost identical at the size it actually appears on the page — the difference between a video that pops in instantly and one that spins.

02Codecs

Choose the right codec

The codec is the algorithm that packs the pixels, and it matters more than any other setting. All three modern web codecs produce far smaller files than an untouched recording; they trade compatibility against efficiency. The container — MP4 or WebM — is just the wrapper around the codec.

The safe default is H.264 in an MP4: it plays on every browser, phone and smart TV made in the last fifteen years. For a modern site you can serve a smaller VP9 or AV1 file and list the H.264 MP4 as a fallback, so capable browsers download the small file and everything else still plays.

H.264 (MP4)
The universal baseline. Largest of the three at a given quality, but it plays absolutely everywhere — the format to keep as a fallback source.
VP9 (WebM)
Google's open codec, roughly 30 to 50% smaller than H.264 at similar quality. Plays in Chrome, Firefox, Edge and Android; pair it with an MP4 fallback for older Safari.
AV1 (MP4 or WebM)
The newest and most efficient — smaller again than VP9 — at the cost of slower encoding and support only in recent browsers. Best paired with an H.264 fallback.
03Settings

Bitrate, resolution and frame rate

After the codec, three settings decide the final size. Resolution is the biggest lever: if a clip is displayed 800 pixels wide, encoding it at 4K wastes enormous bandwidth on detail nobody sees. Cap the resolution to how the video is actually shown — 1080p or 720p covers almost every web use, and background loops can drop lower still.

Bitrate — how many bits per second the codec may spend — is what quality-based encoding sets for you. Rather than guessing a number, pick a quality target and let the encoder allocate bits where the picture needs them; that keeps detail in complex scenes without bloating simple ones. Lower the quality a notch for backgrounds, raise it for detailed footage you want crisp.

Frame rate is the last cut. Most web video looks perfectly smooth at 30fps, and cinematic clips at 24fps; halving a 60fps recording roughly halves the motion data. Dropping the audio track — essential for autoplay backgrounds, which must be muted — saves more again. TinyVid's presets bundle these choices: Standard player for balanced quality, Max compression for the smallest file, Hero background for a muted, looped clip.

04Try it

Compress your video now

Drop a file below and TinyVid applies these settings for you — a modern codec, a web-tuned quality and copy-paste embed code. Free up to 200 MB, no account.

tinyvid · converter

Drop your video here

or browse files
MP4 · MOV · AVI · MKV · WebM · GIF|Free up to 200 MB
05Delivery

Embed the compressed video

A compressed file only pays off if you embed it well. Put it in a plain video tag with an explicit width and height so the browser reserves space and the page does not jump as it loads, and add a poster image so there is something on screen before the first frame arrives.

Set preload to metadata so the browser fetches the dimensions but not the whole clip until someone presses play, and list more than one source — the small WebM or AV1 first, the H.264 MP4 last — so each browser downloads the best file it can decode. For a decorative background, mute the clip and add autoplay, loop and playsinline, since browsers block autoplay for anything with sound.

For the full markup of each pattern — a standard player, a muted background loop and a lazy-loaded clip — see the HTML video embed guide.

06FAQ
01How much can I compress a video without losing quality?
Quite a lot — a 70 to 90% reduction is normal. The trick is to cap the resolution to the size the video is actually shown at, use a modern codec, and pick a quality target rather than a fixed bitrate. At the size it appears on screen the result usually looks all but identical to the source.
02What is the best format for web video?
MP4 with the H.264 codec is the safe default — it plays on every browser and device. For a modern site, serve a smaller WebM (VP9) or AV1 file first and list the H.264 MP4 as a fallback, so capable browsers get the small file and everything else still plays.
03H.264, VP9 or AV1 — which codec should I choose?
Use H.264 when you need something that plays absolutely everywhere. VP9 is roughly a third to a half smaller at the same quality and suits modern browsers; AV1 is smaller still but slower to encode and only supported in recent browsers. Serving a modern codec with an H.264 fallback gives you both size and reach.
04How do I compress a video without installing software?
TinyVid runs entirely online — drop a file, pick a preset and download the result. Files up to 200 MB are free with no sign-up; larger files up to 4 GB use a one-time payment that scales with size.
05Does compressing a video reduce its quality?
Re-encoding is lossy, so there is always some change, but a web-tuned encode is designed to be invisible at the size the clip is displayed. If you need more fidelity, raise the quality slider in Advanced settings; for backgrounds you can lower it and save even more.
06What bitrate should I use for 1080p web video?
Rather than fix a bitrate, let quality-based encoding decide — it spends bits where the picture needs them. As a rough guide, 1080p at 30fps sits around 5 to 8 Mbps for H.264 and noticeably less for VP9 or AV1. TinyVid handles this for you through its presets.