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 SEO1. A super slow website may result in Chrome giving you a badge of shame2.
Tools to reduce video file size 🛠
The following GUIs, CLIs and OVPs can be used to compress video files.
|ClipChamp||GUI||Yes||Free and online tool.|
|FFmpeg||CLI||No||Free and extensive offline tool to manipulate video. Takes the most time to master but yields the highest reward.|
|YouTube||OVP||Yes||Free online tool where you can upload your videos. The service produces a video player widget which you can embed on your website. This video player picks the most optimal quality for your viewer.|
|VLC||GUI||No||Free and offline tool.|
|QuickTime Player||GUI||No||Free and offline tool.|
|VideoSmaller||GUI||Yes||Free and online tool. (500 MB limit)|
|Clideo||GUI||Yes||Free and online tool.|
|YouCompress||GUI||Yes||Free and online tool. (477 MB limit)|
|FreeConvert||GUI||Yes||Free and online tool.|
|iMovie||GUI||No||Free and offline tool.|
|Microsoft Photos||GUI||No||Free and offline tool.|
|ShotCut||GUI||No||Free and offline tool.|
|Vimeo OTT||GUI||Yes||Commercial tool to do adaptive streaming.|
GUI vs CLI vs OVP?
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.
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
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.
-i input.mp4sets the input file, which is
input.mp4in our case.
-c:vsets the codec of the video. We use
libx265for HEVC and
-crfadjusts the Constant Rate Factor: the lower the value, the higher the quality and file size.
- We set
-b:v 0to 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
-anflag in there to remove the audio, but feel free to leave it out.
- We use
-vf scale=1280:-2to downscale the aspect ratio, but feel free to leave this out as well.
-tag:v hvc1flag at
libx265ensures that Safari (and Apple) recognize the video as HEVC. (Only use it with with
output-avc.mp4are 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.
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.
|Name||Reduced to %||New Size||Output|
|ClipChamp||57.4%||18.6 MB||H.264, 1920x800, 24 fps, AAC audio|
|FFmpeg AV1||4.62%||1.5 MB||AV1, 1280x534, no audio|
|FFmpeg VP9||6.48%||2.1 MB||VP9, 1280x534, no audio|
|FFmpeg HEVC||5.24%||1.7 MB||H.265, 1280x534, no audio|
|FFmpeg AVC||44.13%||14.3 MB||H.264, 1280x534, no audio|
|Clideo||38.27%||12.4 MB||H.264, 1920x800, 24 fps, AAC audio|
|YouCompress||35.8%||11.6 MB||H.264, 1920x800, 24 fps, AAC audio|
|FreeConvert||60.49%||19.6 MB||H.264, 1920x800, 24 fps, 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. Facebook3 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.
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.
1 "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
2 "Moving towards a faster web" Google, 11 November 2019, https://blog.chromium.org/2019/11/moving-towards-faster-web.html
3 "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/