Slim down your videos with HandBrake video transcoder

When we build websites, we often need to convert a .mov, .mpeg or an .avi file into an .mp4 file that we can use directly in HTML5. And even if the original is already an .mp4 file, it usually makes sense to check if the file can be compressed further. Smaller files mean faster pages, a better experience for mobile users, better rankings on Google and a smaller climate footprint.

HandBrake, available for Windows, MacOS and Linux, converts anything we throw at it to H.264/H.265 or WebM. There are built-in profiles that make it easy to get started converting to specific platforms, useful filters such as deinterlace and you queue multiple files at once.

Optimal compression can significantly reduce file size

Below are examples of a 29-second screencast. An original version exported from Screencastify, and a version compressed with HandBrake. In the video we demonstrate how the built-in speech synthesis in Windows works in Microsoft Edge. We have to apologize for the sound quality – the voice “Microsoft Helle” doesn’t always sound completely sober 😉

The point is that image and sound are close to being the same in the original and in the compressed version respectively. But judge for yourself:

Bitrate and file size are linked

Bitrate and final file size are closely related. The 420 kbps, or kilobits per second, can be multiplied by the length of the video to give a kilobit number, which for convenience is given in megabytes. In other words – if we reduce the video bitrate to ⅓, the compressed video takes up about ⅓ of the original.

A better user experience, better SEO and a greener Internet

Well, that’s three things at once! Nevertheless, this is what is achieved by optimising the media on the website, and this is especially true for video, which is some of the heaviest content we can serve.

Lighter files load faster at the user and eat up less of the mobile user’s data plan. Faster pages rank better on search engines, especially for mobile users – that’s no longer a secret.

Data transfers are not free. There are many of them and they all use power. When we reduce the file size by 66%, we use correspondingly less energy during the data transfer.

HandBrake settings used for screencast

In short, we are now using an MP4 container with H.264 encoder, no scaling or filters, H.264 encoder tuned to Still Image at a low bitrate of 360 kbps and 2-Pass encoding. Audio is mixed to mono.

It’s too early for H.265 and WebM

These formats potentially compress even better than H.264. The problems at the moment are that H.265 only works in Safari, and WebM does not work in older versions of Safari. Apple doesn’t actually allow any other “browser rendering engines” than Apple’s own, i.e. if the user has an older iPad or iPhone, they can’t just install Chrome or Firefox. A good rule of thumb is, if the video needs to be accessible to most people, an MP4 container with H.264 encoding is the sensible choice.

An exception is perhaps WebM instead of a GIF animations

However, there is potentially one exception. Animated GIFs are often used to support a written statement. Here, you might be able to get away with a still image for those few visitors who don’t have the option to update their Safari browser. In the HTML5 video element, you specify a poster image to be displayed instead of the video in versions of Safari that don’t support WebM.

WebM is significantly lighter than GIF

The clip above is found on giphy.com. Converting it to WebM with HandBrake makes it much smaller. The benefits are so significant that they outweigh the disadvantage of older Safari users not being able to see the animation. Instead, these users get a still image with the same message: “Great job, Egon”.

Let’s build sustainable websites

Sustainable web development is about more than slimming down pages. It’s also important to consciously consider whether a video or image is even necessary. Could the same information perhaps be delivered as text or a vector-based graphic?

Get in touch if you need help finding the right settings for your videos.