How To Optimise Videos For The Web

Video Resolution

Video resolution is the width and height of the video measured by pixels. Essentially, the resolution dictates the quality of the video as a higher resolution includes more data. Video resolution can be scaled down, but cannot be scaled up (you cannot record a video in 360p and later decided to scale this up to 1080p – but you can record a video in 1080p and later scale it down to 360p.)

When deciding the resolution of your video, you should determine the requirement of quality vs the practicality of the file size. For example, a short background video with a text overlay probably doesn’t need to be in 4K Ultra HD resolution. Whereas a portfolio video may require a higher video resolution to maintain high quality to showcase your video skills.

The most common video resolutions include:

• 640 x 360 (Low Definition)
• 854 x 480 (Standard Definition)
• 1280 x 720 (High Definition)
• 1920 x 1080 (Full High Definition)
• 3840 x 2160 (Ultra High Definition, 4K)

Video & Audio Bitrates

Bitrate is the number of bits transferred to the user per second. In conjunction with resolution, bitrate can also determine the overall quality of the video. There is also a separate bitrate for the audio in a video. 

You can actually determine how big of a file size your video will end up with a simple bitrate formula:

File size = bitrate x duration

Optimising your video bitrate is similar to video resolution. It’s also important to consider whether the resolution is at a necessary setting. For example, if you’re displaying a small video just for mobile users, do you really need to force them to download a 1080p video when the video is actually displayed at 360 pixels?

Another thing to keep in mind is muted videos – a lot of videos on web pages will be accompanied with the “muted” attribute, meaning the video won’t play any sounds. However, if the video was recorded with audio, it means it still has an audio bitrate which will still require loading time. If you know the video you are producing is going to end up being muted, you can remove the audio stream from the video file itself.

Video Frame Rate

The frame rate of a video is a measurement of how many frames are displayed per second (FPS). Standard cameras commonly record at 30 frames per second, whereas professional video camera sets usually record at 24 frames per second. 

As you might have guessed, a higher frame rate means a higher file size. When it comes to deciding which frame rate is best for your video, it’s all about the pace of the video.

For example, a quick-paced video with plenty of transitions and moving parts will need a higher frame rate so everything moves naturally and smoothly. Whereas if you have a more static video, like an interview or Zoom call, you can afford to use a lower frame rate as the video would naturally run at a slower pace without many moving parts.

File Formats

There are many different file formats when it comes to video, each serving a specific usage with their own codecs and compression methods.

MP4 is the most common type of video file format. MP4 is widely supported by a range of devices, browsers and mediums. It can also serve high-quality videos at a reasonable file size without worrying too much about optimising the video.

MOV is another popular video file format. MOV is mainly used when you need to absolutely preserve the quality of a very high-quality video. Because of this, MOV file sizes tend to be a lot larger than MP4s and they will rarely be used on the web.

WebM is a video file format introduced by Google in 2010. Similar to MP4, it is also widely supported by most browsers and software. WebM was developed with the specific purpose of serving videos on the web. The main difference between WebM and MP4 are the video codecs used – WebM use VP8/VP9 codecs whereas MP4 uses H.264. In terms of video quality, the VP8/9 codecs actually provide better quality over the H.264. With that, you’d think that MP4 would therefore provide better a better file size, but actually WebM videos tend to be a smaller file size when compared to MP4 counterparts. 

Some other common video formats include WMV, AVI and MKV.

When you are using video on the web, you can actually attribute multiple sources. This way, if the browser or device does not support the primary file format, it can fallback to a secondary format. I would personally recommend using a WebM file as your primary video file format, with an MP4 version of the video as the fallback format.

When do your videos play?

A final way of optimising your video is to think about where the video is placed on the page and when does it start to play? Browsers recognise that videos are going to be a considerable file size, no matter how much you compress it. Because of this, most browsers by default will only download short sections of a video rather than the entire duration. This might sound complicated, but you’ve probably seen this process yourself without knowing – it’s called buffering. Rather than download the entire video just because you’ve loaded a webpage, the browser will try to download as minimum amount of the video as possible.

This is when you need to think of things like autoplaying a video. If you set your video to automatically start playing, this means the browser will have to download the entire video. For short animated videos which are immediately in view, this isn’t much of a problem. However, if your video is halfway down the page but instantly starts playing when the user is at the very top of the page – you are forcing the browser to download an entire video which the user isn’t actually viewing. In addition to that, you’re providing a bad user experience, especially if the video has audio which is just going to confuse the user when they can’t see where this audio is being played from.

Essentially, don’t autoplay your videos if they don’t actually have to be automatically played – both from a web speed and user experience point of view.