Video best practices

Video is a great way to make a website more engaging, whether you’re showcasing a product, introducing a company, demonstrating a service or adding movement to a hero section.

However, video files can also be some of the largest assets on a website. An unoptimised video can quickly become tens or even hundreds of megabytes, slowing down page loads and using unnecessary bandwidth.

The key is to find the right balance between quality, file size and performance.

1080p Is Usually Enough

For most websites, 1920 × 1080 pixels (1080p) is an excellent maximum resolution.

1080p provides plenty of detail for most website applications while avoiding the much larger file sizes associated with 1440p or 4K.

A video displayed at 1200px wide on a website doesn’t necessarily benefit from being supplied as a 4K video. The additional pixels simply mean more data needs to be downloaded and processed.

For most corporate, portfolio, marketing and brochure websites, 1080p is a good balance between quality and performance.

There are exceptions, of course. If visitors are expected to watch a video fullscreen or the website is specifically built around high-quality video, 4K may be appropriate.

Aim for 10 MB or Less

As a general rule, try to keep individual website videos to 10 MB or less wherever possible.

This isn’t a technical limit, but rather a useful performance target. A 5–10 MB video is considerably easier for a browser to download than a 50–100 MB file.

The actual file size will depend on the video’s length and complexity. A 10-second animation can easily be kept below 10 MB, whereas a two-minute video may need to be larger.

The important principle is:

Use the smallest file that still looks good at its intended display size.

Don’t compress a video so heavily that it becomes visibly blurry or pixelated just to hit an arbitrary file size.

Keep Background Videos Short

Background videos don’t need to be long.

A 5–15 second looping clip is often enough to create movement and atmosphere without creating a huge download.

Rather than using a 60-second video of a building, for example, a short clip of people entering, cars moving or another subtle animation can achieve the same effect while being significantly smaller.

For decorative background videos, also consider whether you actually need audio. In most cases, you don’t.

Consider Mobile Users

A video that loads quickly on a desktop broadband connection may be much slower on a mobile network.

For important video content, consider providing a smaller version for mobile devices. A 720p version may be more than sufficient for a video displayed on a phone.

You should also avoid automatically loading large videos that visitors may never watch.

For content videos, a poster image can be used to show a preview before the visitor starts playback. This can help prevent unnecessary downloads and gives the page a polished appearance.

Don’t Overlook Frame Rate

You don’t always need 60fps.

For most website content, 25–30fps is perfectly adequate and can reduce the amount of data compared with 60fps.

60fps makes sense for fast-moving content such as sports, gaming or certain product demonstrations, but for a typical company video or background animation, it may provide little noticeable benefit.

Test Before Publishing

Once you’ve compressed your video, don’t just check the file on your computer. Test it on the actual website.

Check:

How quickly the page loads
How quickly the video starts
Quality on desktop and mobile
Whether compression artefacts are noticeable
Whether the video is actually adding value

Remember that 10 MB is a target, not a hard limit. A longer or more complex video may legitimately need to be larger, while a short background video could potentially be much smaller.

The Bottom Line

For most websites, a good starting point is:

1920 × 1080 (1080p) · MP4 · H.264 · 25–30fps · ideally ≤10 MB

Keep videos short where possible, remove unnecessary audio, consider mobile users and compress the video specifically for web use.

The best website video isn’t necessarily the highest-quality video you can produce — it’s the smallest video that still looks good and provides value to the visitor.

And finally, a few tips from Richard (for the video nerds like me 🤓)

To take things a step further, we can strip off Audio, as it has its own bitrate and codec in the video - this way it can save an extra 0.5 MB - 1 MB on the final size.

Also, we can use VBR (instead of CBR) for setting the bitrate - this basically allows for setting an average bitrate, but if theres a scene with lots of pixel changes, you can set maximum bitrate separately … what this does is, it allows us to use lower bitrate for most of the video, without compromising on quality.