Video files are large. A raw 10-minute 1080p recording can easily be 4–8GB. For web use — embedding on a site, sharing via email, or uploading to a platform — you need that much smaller, and for a video on your own page you also need it arranged so a browser can start playing before the whole file has arrived. This guide covers both, with the FFmpeg commands.
Why videos are so large
Uncompressed video is just a sequence of images. A minute of 1080p at 30 frames per second is 1,800 frames, and one frame at 1920 × 1080 with 8 bits per colour channel is about 6 MB. That works out at roughly 11 GB per minute before anything is compressed.
Modern video files use codecs — algorithms that predict what changes between frames and store only the differences, then discard detail the eye is least likely to miss. H.264, the most widely supported codec, routinely reduces that raw figure by two or three orders of magnitude. The whole craft of compression is deciding how much of that discarding you can get away with.
If the words bitrate and CRF below are unfamiliar, start with what video bitrate actually is and come back.
The key variables
Codec choice
| Codec | Container | Compression | Compatibility |
|---|---|---|---|
| H.264 | MP4, MKV, MOV | Good | Universal |
| H.265 (HEVC) | MP4, MKV | Excellent | Wide (not all browsers) |
| VP9 | WebM | Very good | Modern browsers |
| AV1 | WebM, MP4 | Best | Newest browsers only |
For web use, H.264 in an MP4 container is the safest choice. Every browser, phone, and platform supports it.
CRF (Constant Rate Factor)
CRF is the main quality lever in H.264 encoding. Lower means better quality and a larger file; higher means a smaller file and lower quality. The range for x264 is 0–51, and 23 is its default.
- CRF 18 — visually close to the source for most material. FFmpeg’s own H.264 guide describes 18 as roughly the point of visual transparency.
- CRF 23 — the default. Fine for most content.
- CRF 28 — noticeably softer, meaningfully smaller.
FFmpeg’s guide notes that a change of ±6 roughly halves or doubles the bitrate, which is a useful rule of thumb when you are aiming at a size target. For most web video, CRF 23–26 is a reasonable range — but test it on your own footage rather than trusting the number, because how a given CRF looks depends entirely on the content. See the FFmpeg H.264 encoding guide for the full explanation.
Resolution
If your video is 4K and you are serving it at 720p on a webpage, encode it at 720p. Resolution is one of the biggest drivers of file size.
720p has about a ninth of the pixels of 4K, so downscaling before encoding removes an enormous amount of data before the encoder ever sees it. The file size drop is dramatic — and because a downscaled frame is also easier to predict, the saving usually beats the raw pixel ratio.
Audio bitrate
For most web video, 128kbps AAC is indistinguishable from the source. Dropping from a 320kbps source saves meaningful space on longer videos.
Web-optimized MP4: why -movflags +faststart matters
An MP4 has an index, called the moov atom, that tells the player where every frame is. By default FFmpeg writes it at the end of the file, because it cannot know those positions until the encode has finished. A browser playing that file over HTTP has to fetch the end before it can show the first frame. On a fast connection with a server that supports range requests this costs a short delay; on a slow one, or a server that does not, it can mean downloading the whole video before anything plays.
A “web-optimized” MP4 (the same thing HandBrake calls Web Optimized and some editors call fast start or progressive download) simply has the moov atom moved to the front. FFmpeg does it with one flag, which makes a second pass over the finished file to move the index:
ffmpeg -i input.mov -c:v libx264 -crf 24 -preset slow -vf scale=-2:720 \
-pix_fmt yuv420p -c:a aac -b:a 128k -movflags +faststart output.mp4Taking that apart:
-c:v libx264 -crf 24 -preset slow— H.264 at a sensible web quality, with a preset that is worth the wait for something encoded once and watched many times.-vf scale=-2:720— 720p high, width worked out from the aspect ratio and kept even, which H.264 needs. Drop it if the video will be shown larger than 720 pixels tall.-pix_fmt yuv420p— 8-bit 4:2:0, the only pixel format every browser and phone decodes. Screen recorders and some cameras produce 4:4:4 or 10-bit, which will play in VLC and fail on a web page.-c:a aac -b:a 128k— AAC is the audio codec every browser accepts in an MP4.-movflags +faststart— the index at the front, so playback starts as soon as the first few hundred kilobytes arrive.
If the file is already compressed the way you want and only lacks fast start, you do not need to re-encode. A remux copies the streams and moves the index in seconds, with no quality loss:
ffmpeg -i input.mp4 -c copy -movflags +faststart output.mp4To check whether a file already has it, list the top-level atoms and see which comes first:
ffprobe -v trace input.mp4 2>&1 | grep -E "type:'(moov|mdat)'"If moov is printed before mdat, the file is web-optimized. If mdat comes first, it is not.
The compressor on this site writes a fragmented MP4 (-movflags +frag_keyframe+empty_moov), which also puts moov first and plays progressively, but some players seek in it less smoothly and show the duration late. For a file headed for a <video> tag, the remux line above turns it into an ordinary fast-start MP4 in seconds. It matters much less for a file you are emailing or uploading to YouTube or a social platform, because those either download the whole thing first or re-encode it anyway.
Embedding it
With the file encoded, the HTML is short. Offering a WebM first and the MP4 as a fallback lets browsers that support VP9 take the smaller file:
<video controls playsinline preload="metadata" poster="poster.jpg" width="1280" height="720">
<source src="clip.webm" type="video/webm">
<source src="clip.mp4" type="video/mp4">
</video>preload="metadata" fetches only enough to show the length and first frame rather than the whole file on page load, and the width and height stop the page from jumping when the player appears. For a muted autoplaying background loop, add autoplay muted loop and strip the audio track entirely with -an, which saves bytes nobody will hear.
Browser-based vs server-side compression
Traditionally, compressing video meant installing FFmpeg locally or uploading the file to a service. Browser-based tools run FFmpeg compiled to WebAssembly directly in the page — no installation, no upload, and the file never leaves your device. Here is how that actually works.
The trade-off is speed. A browser sandbox cannot reach hardware encoders and runs under tighter memory constraints, so an encode that takes seconds in a terminal takes minutes in a tab. For a one-off file up to a few gigabytes that is a fair price for not handing your video to a stranger; if you compress video every day, install FFmpeg.
Practical settings for common use cases
Sharing via email or messaging: MP4, CRF 26, 720p
Embedding on a website: WebM (VP9) or MP4 (H.264), CRF 24, at display resolution, with -movflags +faststart on the MP4
Uploading to YouTube or social platforms: MP4 H.264, CRF 18–20, original resolution (platforms re-encode anyway; give them quality to work with)
Archiving: MKV, CRF 20, original resolution
Keep reading
- What is video bitrate, and what happens when you lower it? — the number underneath every setting above.
- How to reduce video file size without losing quality — tuning CRF and presets per content type.
- ffmpeg.wasm explained: how FFmpeg runs in the browser — the technical side of encoding in a tab.
- H.264 vs H.265: the real file size difference — codec choice for delivery, with the caveats.
- CRF (Constant Rate Factor) in FFmpeg: which value to use — picking the number, and when not to use one.
- Supported video formats — which container to write, and when remuxing beats re-encoding.
Sources
- FFmpeg H.264 encoding guide — CRF range, defaults and the ±6 rule of thumb.
- YouTube recommended upload encoding settings — the published bitrate targets for uploads.
- MDN: web video codec guide — codec support across browsers.
Ready to try it? Compress a video online, free — the file is never uploaded — or shrink one to a specific size limit.