A video on your homepage can make a site feel alive — or make it feel broken. Drop a 120MB phone clip into a hero section and visitors on mobile data stare at a blank box while the page’s Largest Contentful Paint score falls off a cliff. The fix isn’t to give up on video. It’s to treat every clip like any other page asset: give it a size budget, then compress it to fit.
This guide shows how to pick that budget, how to turn it into a target file size with one line of arithmetic, and how to compress the video to that exact size in your browser — without uploading the file anywhere.
Why video size matters for page speed
Video is usually the heaviest thing on a page by a wide margin. A typical web page’s HTML, CSS, JavaScript and images together weigh around 2–3MB; a single unoptimized clip can be fifty times that. The cost shows up in three places:
- Load time and Core Web Vitals. An autoplaying hero video competes for bandwidth with everything else above the fold. If its poster frame or first frame is the largest element on screen, it directly drives your LCP score.
- Mobile visitors. On a 4G connection doing 10 Mbps in practice, every 10MB of video costs about eight seconds of download. Many visitors leave long before that.
- Hosting bills. If you self-host, bandwidth is paid per gigabyte. A 50MB background loop seen by 20,000 visitors a month is a terabyte of transfer — for a decoration.
The good news: web video almost never needs the bitrate a phone or camera records at. Your iPhone captures 4K at roughly 400MB per minute so you can crop and grade later. A muted 20-second background loop needs a tiny fraction of that.
Size budgets for common website videos
These are practical starting points, not hard rules. File size is simply bitrate × duration, so the right-hand column follows directly from the bitrate column (1 Mbps ≈ 7.5MB per minute).
| Use on the page | Typical length | Resolution | Video bitrate | Size target |
|---|---|---|---|---|
| Hero / background loop (muted) | 10–30 s | 720p–1080p | 1–2 Mbps | 2–5MB total |
| Mobile-first background | 10–20 s | 720p | 0.8–1.2 Mbps | 1–3MB total |
| Product demo / feature clip | 30–90 s | 1080p | 2–4 Mbps | 15–30MB per minute |
| Landing-page explainer with voice | 1–3 min | 1080p | 2.5–4 Mbps | 20–30MB per minute |
| Long tutorial or webinar | 10 min + | 1080p | — | Use YouTube/Vimeo/a video host |
Background loops can go much lower than you’d expect because nobody studies them closely, they’re usually slow-moving, and many sites dim or blur them under text anyway. Product demos with on-screen text or UI need more bitrate so small details stay sharp. Anything long enough that people will scrub, pause or watch on a TV belongs on a dedicated video host with adaptive streaming — a single MP4 file isn’t the right tool there.
Turn the budget into a target file size
You don’t need to think in bitrates at all if your compressor lets you set an output size directly. Work backwards from the budget:
Target size (MB) ≈ bitrate (Mbps) × duration (seconds) ÷ 8
So a 20-second loop at 1.5 Mbps is 1.5 × 20 ÷ 8 = 3.75MB, and a 60-second demo at 3 Mbps is about 22MB. Round to a friendly number and that’s the figure you type into the compressor.
How to compress a video for your website (step by step)
- Trim first. Every second you cut is bitrate you can spend on the seconds you keep. A background loop rarely needs more than 15–20 seconds.
- Start from the right resolution. If the source is 4K, export or record it at 1080p before compressing. At a low web bitrate, 1080p frames look cleaner than 4K frames starved of data. (On iPhone: Settings → Camera → Record Video → 1080p HD at 30 fps.)
- Open RedPandaCompress and drop in the clip. MP4, MOV, WebM, MKV, AVI and more are accepted, up to 2GB.
- Set the output size to the target you calculated — 4MB for the hero loop, 22MB for the one-minute demo. If you’re not sure, the automatic mode finds a size that balances quality and weight for you.
- Compress and check. Play the result full-screen on a laptop and on your phone. If edges look blocky in fast motion, go up 20–30% and try again; if it looks identical to the original, try going lower.
- Upload the MP4 to your site — WordPress media library, Shopify, Webflow, Squarespace or your own server.
Two things worth knowing about how this works. First, the compression runs 100% in your browser: the video is processed on your own device and never uploaded to a server, which matters when the clip is an unreleased product, a client’s footage, or anything under NDA. Second, the output is H.264 MP4 — the one video format that plays in every browser (including Safari on older iPhones), every CMS and every email client, so you don’t need fallback files.
Worked example: a 24-second hero video
Say you filmed a slow pan across your workshop on an iPhone for a homepage background. The original is 24 seconds of 4K/60 HEVC: about 160MB. Here’s the path to a page-friendly file:
- Trim to the best 18 seconds and export at 1080p/30 from Photos or iMovie.
- Budget for a background loop: 1.5 Mbps → 1.5 × 18 ÷ 8 ≈ 3.4MB. Call it 3.5MB.
- Compress to 3.5MB in the browser. The result is a universally playable H.264 MP4 at about 2% of the original size.
- On a 10 Mbps mobile connection that’s under three seconds of download instead of more than two minutes — and with
preloadand a poster image (below), the visitor sees the page immediately while the video arrives.
These numbers are illustrative — your footage will land differently depending on how much motion and detail it has — but the arithmetic is the same for any clip.
Embed it so it doesn’t block the page
Compression is most of the win, but the embed code decides when those bytes are downloaded. For a background or hero loop, this is the pattern that works everywhere:
<video autoplay muted loop playsinline preload="metadata" poster="hero-poster.jpg">
<source src="hero-loop.mp4" type="video/mp4">
</video>- muted + playsinline are required for autoplay on iPhone and in most desktop browsers.
- poster gives the browser a lightweight image to paint instantly — use a compressed JPG or WebP of the first frame.
- preload=”metadata” (or
"none"for videos further down the page) stops the browser fetching the whole file before it’s needed. Videos below the fold should only start loading when they scroll into view. - Muting doesn’t shrink the file. The audio track is still downloaded. For a silent loop it’s only ~1MB per minute at typical bitrates, so it rarely matters — but if you’re squeezing every kilobyte, remove the audio in your editor before compressing.
For longer self-hosted MP4s that visitors will actually watch, it’s also worth making sure the file is “fast start” (the index sits at the beginning of the file), so playback can begin before the download finishes. Most CMS video blocks and hosts handle this for you; if you serve files from your own server, a one-time pass with ffmpeg -i in.mp4 -c copy -movflags +faststart out.mp4 does it without re-encoding.
H.264, H.265 or AV1 for the web?
Newer codecs like H.265 (HEVC) and AV1 can hit the same quality at a smaller size, and you’ll see guides recommending them for hero videos. The catch is support: HEVC doesn’t play in every browser, and AV1 still fails on many older iPhones and Macs. Using them safely means encoding two or three versions and listing them as fallbacks in the <source> tags. For most small-business sites, a well-compressed H.264 MP4 is the pragmatic choice: one file, plays everywhere, and at the budgets above the size difference is a megabyte or two. Our H.264 vs H.265 vs AV1 comparison goes deeper on the trade-offs.
FAQ
What is a good file size for a website background video?
Aim for 2–5MB for a 10–30 second loop, and under 3MB if most of your traffic is mobile. That works out to roughly 1–2 Mbps at 720p or 1080p, which looks clean for slow, ambient footage.
Does compressing a video for the web reduce quality?
Technically yes — compression discards data — but at sensible budgets the difference isn’t visible in a browser window. Camera files are recorded at very high bitrates for editing headroom, so most of what’s removed was never going to be noticed. Check the result full-screen and raise the target if you see blockiness. Our guide to compressing video without losing quality covers this in detail.
Should I host videos myself or use YouTube?
Self-host short, silent, decorative clips (hero loops, product snippets): they look cleaner without a player UI and you control loading. Put anything long, or anything people will actually sit and watch, on YouTube, Vimeo or a video host, which stream adaptively and absorb the bandwidth.
Is it safe to compress client or unreleased footage online?
With most online compressors, your file is uploaded to someone else’s server first. RedPandaCompress runs the whole compression inside your browser tab, so the video never leaves your computer. We explain how to verify that yourself in Are Online File Converters Safe?
Give every video a budget
Fast pages with video aren’t about a secret codec setting — they come from deciding how many megabytes a clip is worth, compressing it to exactly that, and embedding it so it loads at the right moment. When you’re ready, compress your website video to a target size with RedPandaCompress: free, no watermark, no upload, and an H.264 MP4 that plays on every browser your visitors use.
Fei is a skilled software engineer. He previously worked at Google and now at a startup. His expertise includes web media processing, cloud architecture, complex algorithms, and AI training and deployment. Beyond work, Fei enjoys diving into new knowledge and is a big fan of strategy games.
