Are you looking for a tool to compress videos for websites or (Wordpress) blogs? This article walks you through tools and strategies to reduce the size of a video file.

Why? Smaller videos save storage and bandwidth. Reducing the video file size results in faster downloads. Faster downloads reduces the page load. A fast website leads to happier users. A slow website impacts your SEO¹. A super slow website may result in Chrome giving you a badge of shame².

Tools to reduce video file size 🛠

The following GUIs, CLIs and OVPs can be used to compress video files.

A Graphical User-Interface (GUI) [Easy, Inexpensive, Inflexible] is the most user-friendly tool to reduce the size of a video.

A Command-Line Interface (CLI) [Intermediate/Difficult, Inexpensive, Flexible] allows you to tweak more encoding parameters than a GUI – because a GUI often uses a CLI under the hood. This advantage is also its disadvantage: you need to know more about encoding configurations and the API of the CLI to achieve the optimal compression.

An Online Video Platform (OVP) [Easy/Intermediate, Expensive, Inflexible] is a GUI and/or CLI offered by (commercial) companies in the video streaming industry. Typically, an OVP offers (an) online tool which allows you to upload videos to their servers (or to your on-premise/local storage). The OVP transcodes your video into multiple renditions – in different codecs and dimensions. The OVP might also package them into an adaptive manifest which allows you to do HTTP Adaptive Streaming.

Using an OVP is considered "the next step" if you're serious about video. We recommend you to consider an OVP if your viewers require the best possible video UX – and if you are new to video streaming. You can also build your own video streaming infrastructure by connecting (or building) encoding, transcoding and packaging services/software with web servers and CDNs.

Compression strategies

At ottball, we employ three strategies for our objective. (🎯 Users must understand the content of our videos and may enjoy its visual quality.)

1. Offline and delicately

We use ffmpeg if we have the patience (and need!) to create the most optimal compression of a video file. From an input file input.mp4 (typically encoded in H.264), we create 4 output files using 4 different codecs: AV1, VP9, HEVC (=H.265) and AVC (=H.264).

Last login: Thu Jun  4 18:44:23 on ttys000

me@ottball ~ % ./ffmpeg -i input.mp4 -c:v libaom-av1 \
    -crf 55 -b:v 0 -an -vf scale=1280:-2 \
    -strict experimental \
    output-av1.webm
    
me@ottball ~ % ./ffmpeg -i input.mp4 -c:v libvpx-vp9 \
    -crf 50 -b:v 0 -an -vf scale=1280:-2 \
    output-vp9.webm
    
me@ottball ~ % ./ffmpeg -i input.mp4 -c:v libx265 \
    -crf 35 -b:v 0 -an -vf scale=1280:-2 \
    -tag:v hvc1 \
    output-hvc.mp4
    
me@ottball ~ % ./ffmpeg -i input.mp4 -c:v libx264 \
    -crf 22 -b:v 0 -an -vf scale=1280:-2 \
    output-avc.mp4

We use the following flags in the above terminal commands to generate our four 4 files.

• ./ffmpeg calls the ffmpeg software.
• -i input.mp4 sets the input file, which is input.mp4 in our case.
• -c:v sets the codec of the video. We use libaom-av1 for AV1, libvpx-vp9 for VP9, libx265 for HEVC and libx264 for AVC.
• -crf adjusts the Constant Rate Factor: the lower the value, the higher the quality and file size.
• We set -b:v 0 to zero to have a constant quality, but you can use a constrained quality by setting it to a value higher than 0.
• We put the -an flag in there to remove the audio, but feel free to leave it out.
• We use -vf scale=1280:-2 to downscale the aspect ratio, but feel free to leave this out as well.
• The -tag:v hvc1 flag at libx265 ensures that Safari (and Apple) recognize the video as HEVC. (Only use it with with libx265!)
• output-av1.webm, ..., output-avc.mp4 are the names of the newly created output files.

So, why do we create 4 variants? That's because we can configure multiple sources for a HTML <video>. The browser automatically selects and plays the first compatible source. Thus, when ranking our sources, we want to put the the source with the lowest file size at the top. (The order is usually AV1 > VP9 = H.265 > H.264.)

<video width="100%" height="100%" controls>
  <source src="output-av1.webm" type="video/webm; codecs=av01.0.05M.08">
  <source src="output-vp9.webm" type="video/webm; codecs=vp9,opus">
  <source src="output-hvc.mp4" type="video/mp4; codecs=hevc">
  <source src="output-avc.mp4" type="video/mp4; codecs=avc">
  Your browser does not support the video tag.
</video>

The above HTML snippet could be used to pass along your 4 video sources to a <video> element. Sometimes, we leave the AV1 source, because encoding in AV1 takes a lot of time. Because most modern devices have support for either VP9 or HEVC, you could even consider excluding H.264 – if you don't care about viewers on older versions of Safari or viewers on Internet Explorer.

2. Offline and rushed

If we're in a rush with unreliable internet, and don't care about optimizing, then we'll just use iMovie or Microsoft Photos. When we use these tools, we try to gain the biggest savings by downscaling the resolution. It's not the most intelligent strategy, but it it's better than doing nothing.

3. Online and rushed

We'll use a web app like YouCompress.com if we are okay with a web app making the optimization decisions. It might take some time until you can download your compressed file when using an online service. Some online tools have an upload limit, which can be a bummer.

Results 📈

The table below compares some of the mentioned tools and approaches. The source file is input.mp4, which is an H.264 (part 10) video of 32.4 MB at 24 fps with a resolution of  1920x800 with AAC audio.

So, based on this, we'd recommend FFmpeg if you want to go all the way, but a GUI (like YouCompress) for your everyday usage. (Submit your encoding of input.mp4 to have it added to the list, and explain what you did!)

If the visual video quality is important in your use-case, then these three strategies might not be for you.

Why is my video file size so large

The file size of a video is heavily influenced by parameters like resolution, frame rate and codec.

Resolution 📐 – A video is a sequence of frames. A frame is a grid of pixels – for example 1280 x 720. The more pixels there are in a grid, the more data will be required to represent the frame, and the longer the video download will take. Reducing the resolution reduces the file size.

Audio 🔉 – A video usually contains audio data. Removing the audio reduces the file size.

Frame rate 🏃‍♀️ – Video frames are played at a certain rate – e.g. 30 frames per second (fps). If one frame is size X, then 1 second is 30X. If we increase the frame rate to 60 fps, then 1 second is 60X. Reducing the frame rate reduces the file size.

Codec 📀 – A video is encoded with a certain video codec (e.g. H.264, VP9, AV1). Some codecs are more efficient than others. Some platforms support different codecs. Choosing the most efficient codec for your targeted platforms leads to the lowest file size. Facebook³ writes that AV1 files are 50% smaller than AVC files and 30% smaller than VP9 files. (We'll avoid the VP9 vs HEVC discussion, because they're seldom both supported on the same browser.) For each codec, you can also optimize its encoding parameters – and one could write a book on how to optimize these parameters per use-case.

Container 📦 – An encoded video is contained within a container (e.g. .ts, .mp4, .webm). Some platforms support more/different containers than others, and some containers are more efficient than others. Choosing the most efficient codec for your targeted platforms reduces the file size.

Deltas 👣 – A video codec calculates and stores the deltas between frames to save bandwidth. The more differences there are in your video scenes, the larger the deltas between frames are. Record similar frames to reduce the size of your deltas to reduce the file size.

Video duration 📏 – Reduce the duration of your video to reduce the file size.

Conclusion 🤷‍♀️

You can easily reduce the size of your video by Googling an "Online Video Optimizer". If you really care about optimizing the trade-off between video size and quality, you should use a CLI tool like FFmpeg.

You must consider your use-case when selecting your compression strategy and encoding parameters. Are your viewers mainly on their Android phone? Do your viewers require audio? If so, then you could create a video with a small resolution (e.g. 540p) without audio in the VP9 codec.

But what if most of your parameters are unknown? What if you want to optimize for every use-case? Then you want to do adaptive streaming. When you do adaptive streaming, your video player selects the most optimal video rendition given the circumstances (i.e. parameters) of your viewer at runtime.

Contact us if you want to contribute to this article.

References

¹ "Using site speed in web search ranking" Google, 9 April 2010, https://webmasters.googleblog.com/2010/04/using-site-speed-in-web-search-ranking.html
² "Moving towards a faster web" Google, 11 November 2019, https://blog.chromium.org/2019/11/moving-towards-faster-web.html
³ "AV1 beats x264 and libvpx-vp9 in practical use case" Facebook, 10 April 2018, https://engineering.fb.com/video-engineering/av1-beats-x264-and-libvpx-vp9-in-practical-use-case/

Original vs Fake: The Video Game 📺

Contribute at https://github.com/thijsl/codec-game/ by improving the code or by submitting a new encoding of input.mp4 through a pull request.