Website background video: how to use it without slowing the site down

A background video works when it’s short, silent, light and out of the way: a 6 to 12-second loop, compressed for the web (around 1.5 MB at 1080p), with a still image while it loads and a way to pause it. Prepared badly, a single video can weigh more than the rest of the site put together. Here’s how I do it, using a shot of mine of the waterfall in Anna, near Valencia.

What a video really weighs

What an editing program exports is meant to be watched big or edited again, not to travel over a mobile connection. This shot came out of the editor at 21 megabits per second: 18.7 MB for just 7 seconds. For the web I compressed it to 1.5 MB, twelve times smaller, and you can’t tell the difference by eye.

Where the limit is

Compression has a limit. Below a certain point, whatever moves most in the image (water, mist, leaves) breaks into blocks. That point depends on the shot: a still sky holds up far better than a waterfall. That’s why I don’t use a fixed number: I compress, watch it full screen and adjust.

How I prepare it

• Short. Between 6 and 12 seconds, and a shot that loops without the cut showing.
• Silent. No audio track: it weighs less, and browsers only autoplay muted videos.
• Two sizes. 1080p for large screens and 720p for phones. On a phone you can’t see the difference, and 1080p weighs more than twice as much.
• H.264 in MP4. It plays in every browser. I compress at constant quality with a bitrate cap, so no single moment blows up the weight.
• Ready to start early. With the video’s index at the start of the file, it begins playing before it has finished downloading.

How I put it on the page

• A still image first. While the video arrives, a frame from the shot itself is shown. If the video never loads, the home page isn’t left empty.
• Only when it appears. The video doesn’t download until it scrolls into view, and it stops when it leaves.
• Muted and inline. That’s the condition for it to play by itself, on iPhones too.
• With a pause button. Accessibility guidelines (WCAG) ask for a way to pause anything that moves by itself for more than five seconds.
• Respecting people who don’t want motion. If someone has the reduce-motion setting on, they see the still.

All of this matters because the opening of a page is the first thing measured when we talk about speed. I explain it in Why a slow website costs you bookings.

Video or photo?

A background video is worth it when movement says something a photo can’t: falling water, changing light, a place breathing. If the shot could be a photo, make it a photo: it weighs far less and says the same.

In short

A well-made background video is short, silent and compressed for the web; it shows a still while it loads, only downloads when it appears and can be paused. That way it brings all the atmosphere without making anyone wait.

If you want video on your home page, I can shoot it and prepare it: tell me about the project and I’ll reply within one working day.