Website Speed: How to Compress a Video

April 12, 2018

How Video Slows Down Your Website

Video content is a growing market that is quickly becoming king. In 2016, 1/3 of all online activity was spent watching a video. Therefore it is essential that if you want to capture this growing audience that you optimise your video content.

Whenever a user visits a page with an embedded video on it, be that via YouTube, Vimeo, Wistia or any other similar media platform, extra requests are made from user to the server in order to retrieve the information needed to render the video content.

"But what if the user does not play the video?" This is still an issue for page load speed even if the user does not click to play the video or if the video does not auto play.

This is because the content for the video is still requested from the server upon page load along with other page content, and depending on the priority of how content is requested and loaded onto the page, video content could load before other content and therefore holding up and stopping other, potentially more important page content from loading.

"Okay, this is a problem. How do I fix this?"

Ways to Compress Video to Improve Website Speed

HandBrake

HandBrake is a free program that allows for videos to be converted into different file types, resolutions, quality, framerates and more. These features enable a user to reduce the file size of a video before it is uploaded to a third party such as YouTube, Vimeo or Wistia.

HandBrake can be downloaded here: https://handbrake.fr/

Different File Types in HandBrake

When you first load up HandBrake it may look confusing, but don't worry we will guide you through the process of compressing your video step by step.

The first thing you want to do is to click "Open Source" to import a raw video file into HandBrake for compression.

Then select "File" and browse to and select your video file you wish to compress. You can do batch compression, however this is a bit more advanced and in this tutorial we will cover the basics of HandBrake video compression.

Your chosen video will then import into HandBrake. This may take a while depending on your video file size.

HandBrake's output settings will default to the .mp4 file extension. This is great as .mp4 files are widely supported by most applications and devices. .mp4 files are also smaller in file size compared to other file extensions such as .avi.

Resolution and Preset Settings in HandBrake

In HandBrake you can change the resolution of your video by manually typing in the resolution you wish or you can choose a preset resolution template. These settings can be found under the "Picture" tab.

HandBrake templates are useful because they maintain the aspect ratio of the video and also change other quality settings to optimise and compress your video for a specific device or quality setting.

Some of the preset templates for devices are for Android, Apple, PlayStation and Xbox devices. Whereas some preset templates for quality offer "Very Fast", "Fast", "High Quality" or "Super High Quality" templates.

Having a smaller resolution means having a smaller file size, however there will be fewer pixels to represent the video, so the quality of the video will also be reduced.

Quality Settings in HandBrake

In HandBrake you can also change the quality of your video. The main two ways you can do this is via the "Constant Quality" and "Encoder Preset" settings. These settings can be found under the "Video" tab.

The Constant Quality slider allows the user to specify a quality level and HandBrake will automatically adjust the bit rate of the video to meet that quality level. Constant Quality is a trade off between video quality and video size.

The Encoder Preset allows the user to trade off between how long the video takes to encode during the HandBrake compression and the compression efficiency. With this setting if you have a lot of time you may as well set this value to the slowest compression setting so that the even though the compression may take a while, the video can be compressed optimally.

Output Settings in HandBrake

Finally, a destination file path must be selected for the video output to be saved in. Once this has been set the "Start Encode" button can be clicked and the compression process will take place.

The compression of the video will take longer depending on the how long the video is, how large the video is and what quality settings were chosen.

We hope that this tutorial helps you on your way to mastering video content! If you do have any question please feel free to contact us.

Interested in working with us?



Need help with your next development project? Let’s talk.

Get in touch