[FAQ]

I’m trying to put a background video on my homepage to make it look more modern. But I’m a bit confused about the “size”.

When people say “size,” are they talking about the dimensions, like 1920×1080? Or the file size, like how many MBs? Both, maybe?

Actually, I’m worried about the performance. I want it to look sharp on most screens, but I don’t want to make my website super slow to load for people with slower internet. What’s a good balance to aim for? I can’t seem to find a straight answer for this.

[Jeff Bullas]

That’s the right question to ask before you implement a heavy asset like a background video.

Short Answer: The best video size is a balance; you should use 1920×1080 pixel dimensions for the video file, but compress it aggressively to be under 10MB, and ideally even less.

Your goal is to deliver the visual impact without destroying your site’s loading speed and user experience.

To get this right, you need to address several aspects of the video file itself.

First, keep the video content short and simple—a 15 to 30-second seamless loop is more than enough to create the desired effect without a massive file.

Second, you must aggressively compress the video; while 10MB is a generous maximum, you should really aim for the 2-5MB range for the best performance results on all internet connections.

Third, the video must not contain an audio track, as this adds unnecessary weight to the file and is a major annoyance for website visitors.

Finally, make sure the video is saved in a web-friendly format, such as an MP4 using the H.264 codec, as this will ensure good compression and broad browser compatibility. Never use a raw, uncompressed video file straight from a camera.

Cheers,
Jeff

[Author]

Posts