101 lines
4.5 KiB
Plaintext
101 lines
4.5 KiB
Plaintext
---
|
||
title: Video compression
|
||
subtitle: Encode like you mean it.
|
||
lang: en
|
||
slug: "video-compression"
|
||
excerpt: How to gain precious weight when encoding videos.
|
||
tags: ["Design"]
|
||
type: articles
|
||
createdAt: "2021-05-05T09:00:00.000Z"
|
||
updatedAt: "2022-06-08T14:24:06.000Z"
|
||
---
|
||
|
||
import AstroImage from "../../../components/AstroImage.astro";
|
||
export const premiereExport = "https://assets.nardu.in/video-premiere-1.jpeg";
|
||
export const handbrakeBase = "https://assets.nardu.in/video-handbrake-1.jpeg";
|
||
export const handbrakeVideo = "https://assets.nardu.in/video-handbrake-2.jpeg";
|
||
export const handbrakeAudio = "https://assets.nardu.in/video-handbrake-3.jpeg";
|
||
export const handbrakeWeb = "https://assets.nardu.in/video-handbrake-4.jpg";
|
||
|
||
## Let's play.
|
||
|
||
Videos are everywhere. **EVERYWHERE!** But videos can and will be huge when 4k becomes an internet standard. Currently, 1920x1080 is king and we usually have no problem hosting or playing this resolution.
|
||
|
||
## Because we can doesn't mean we should.
|
||
|
||
Right now, the (good) trend of web performance is on the rise. Everyone wants a blazing fast loading website, which might not be possible if we send requests to 100mb (or even more) videos.
|
||
|
||
With a good connection, users will not see the difference. But if we go down that path, nor will they with a 300mb one. So the goal is to make every asset as small as possible. It's already the case with images. But it's simpler and faster than video encoding.
|
||
|
||
## Small size, best quality.
|
||
|
||
Let's say we exported a 1920x1080 video from Premiere Pro with these basic settings:
|
||
|
||
<AstroImage src={premiereExport} width="673" height="800" alt="" />
|
||
|
||
It's gorgeous, it's Full HD, it's 1:30 minute of excellent editing but it's 50mb… What a shame.
|
||
|
||
> We can already bring down the size from Premiere or Media Encoder by selecting CBR instead of VBR and using a low bitrate (like 2 or 3).
|
||
|
||
Let's now use [Handbrake!](https://handbrake.fr/) It's free, open source and multi platform. You can also read this great article from [Ueno](https://loremipsum.ueno.co/dear-ueno-how-do-you-compress-videos-6657ebd9dd28?gi=930afecec398) on video encoding.
|
||
|
||
**Please please PLEASE. Never export videos from within After Effects.**
|
||
|
||
## Handbrake
|
||
|
||
### Summary screen
|
||
|
||
While it's not as nice as Premiere Pro, it has way more exporting capabilities. Follow these steps to use good standard settings:
|
||
|
||
1. Open your source video
|
||
1. Select a preset corresponding to your future usage like Fast 1080p30
|
||
1. Check Web Optimized
|
||
1. Keep MPEG-4 as the format
|
||
|
||
<AstroImage src={handbrakeBase} width="728" height="337" alt="" />
|
||
|
||
### Video screen
|
||
|
||
1. Keep H.264 (x264) or use H.264 nvidia nvenc if you can (crazy fast encoding by nvidia)
|
||
1. Choose Constant Quality and try a value between 20 and 30 (higher = smaller size but lower quality)
|
||
1. Choose Peak Framerate. If you don't know the framerate, keep the default setting
|
||
1. Choose the type of video you are encoding (film, animation…)
|
||
|
||
<AstroImage src={handbrakeVideo} width="728" height="337" alt="" />
|
||
|
||
### Audio screen
|
||
|
||
If you don't have audio, be sure to set the audio channel to none.
|
||
If you have an audio channel, these settings are great and will not influence the size much:
|
||
|
||
1. Codec AAC
|
||
1. Samplerate 44.1
|
||
1. Bitrate 192 to 256 (your choice)
|
||
|
||
<AstroImage src={handbrakeAudio} width="728" height="337" alt="" />
|
||
|
||
### Export!
|
||
|
||
I used a RF of 25 for this example and no audio.
|
||
|
||
1. My Premiere Pro video was 50,6mb
|
||
1. My Handbrake video is 5,5mb
|
||
|
||
> What a save!
|
||
|
||
I ended up dividing the original size by 10. Which is cool.
|
||
I tried with a RF of 30. The video was still pretty good and only 3,3mb.
|
||
|
||
## Exporting for the web
|
||
|
||
Now that we know how to properly compress videos, let's go further. Say we have a website with a lot of videos on the same page. We still want to load the content as fast as possible. So our videos need to be as small as possible. We won't do better than previously seen using mp4/H.264. However, we can use **webm/VP9.**
|
||
Webm is an html video format and VP9 is its latest codec.
|
||
|
||
Using Handbrake and webm/VP9, we can achieve really great compression without losing too much quality (or none at all depending on the settings). I was able to divide by 4 the size of a video using these presets:
|
||
|
||
<AstroImage src={handbrakeWeb} width="728" height="313" alt="" />
|
||
|
||
The only down side is that it takes some time to encode. It will depend on the video length and your computing power.
|
||
|
||
I tried various settings but I read [here](https://trac.ffmpeg.org/wiki/Encode/VP9) that VP9 is supposed to be used with two-pass encoding. You then have to find the right bitrate (here 1000) for your situation.
|