How to Optimize Videos for the Web with FFmpeg

[00:00] all right when you're making a website

[00:01] oftentimes you want to have some sort of

[00:03] video on your website maybe you want to

[00:05] have a video background for your home

[00:07] page that's very trendy

[00:09] or maybe you want to have some video

[00:10] showcasing your product that you want

[00:12] people to buy

[00:13] in any case adding a video to your

[00:15] website will make it look very nice

[00:17] but of course when you're adding a video

[00:18] you need to optimize it

[00:20] because this video right here well let

[00:23] me just show you what i have here i have

[00:25] a video called skyscrapers

[00:27] and is a very nice video of some

[00:29] skyscrapers going by

[00:30] that is a fine looking video but the

[00:33] problem with this is it is 27 megabytes

[00:35] and i don't know about you but

[00:37] i don't want my videos to have to

[00:39] download 27 megabytes of video just to

[00:41] see my home page and so in this video

[00:43] i'm going to show you how you can

[00:44] optimize this bring it down to a

[00:47] reasonable file size while still keeping

[00:49] the quality good because of course if

[00:51] you have a video on your website you

[00:53] want it to look nice that's the entire

[00:55] point and today we're going to achieve

[00:57] all this and more with this program

[00:59] called ffmpeg which you may have heard

[01:01] of before

[01:02] but it's going to be a command line

[01:04] application

[01:05] that you can install with your favorite

[01:08] package manager so

[01:10] it's going to be in all the official

[01:11] repositories so just pick whichever

[01:14] package manager that you're using

[01:16] it is as simple as that install that and

[01:18] once you have it installed

[01:20] i will show you how you can use it and

[01:23] the most basic usage will go something

[01:25] like this ffmpeg dash i and this is

[01:29] going to be your input file which

[01:31] we already said is skyscrapers.mp4

[01:34] and probably the most common

[01:36] optimization that you would like to make

[01:37] to some video is just to

[01:39] change the resolution so this video is

[01:42] originally 1440p

[01:44] and i'd like to get it down to 1080p so

[01:46] i want to make the resolution 1920 by

[01:48] 1080 pixels

[01:50] and we can do that by passing in this

[01:51] dash vf flag

[01:53] this is basically shorthand for saying

[01:55] uh add this filter and the filter that

[01:57] we're going to be adding to this is

[01:59] scale so we want the scale to be 1920

[02:03] that is going to be how many pixels

[02:04] across that i want this video to be

[02:06] and then you can also pass in the height

[02:08] here

[02:09] but to be honest you probably just want

[02:11] to keep the aspect ratio the same you

[02:13] don't want to have to do the math so you

[02:15] only really have to type in the width

[02:16] and then you type in

[02:18] dash 2 and this will automatically set

[02:20] the height based on the aspect ratio and

[02:23] the negative 2 is just saying that we

[02:24] want to keep the height

[02:27] even integer so we don't want it to be

[02:30] 1081 pixels

[02:32] in height we want to be 1080 pixels in

[02:34] height just because if it's an odd

[02:35] number you can run into some issues with

[02:37] some video players so that's the only

[02:39] reason i'm putting negative two instead

[02:41] of negative one and then you would just

[02:43] type the output file right here this is

[02:45] the file that we wanted to create so

[02:47] let's say we want to make output.mp4 and

[02:50] one more flag that you can optionally

[02:51] add in here is dash a n

[02:54] what this flag will do is it will remove

[02:55] all the audio information in this video

[02:58] file so for this specific video it

[03:00] doesn't have any audio and i don't want

[03:02] it to have any audio because

[03:04] let's say in this example i just wanted

[03:06] to be a background video of course it's

[03:07] not going to have any sound but even if

[03:09] your video doesn't have any sound then

[03:11] it may still have some audio information

[03:13] so dash and will just strip out all that

[03:16] information and no additional metadata

[03:18] or anything about audio so that will

[03:20] save you a little bit on your file size

[03:22] and let's just run this and see what

[03:24] happens now this will take a minute or

[03:26] two so

[03:27] i actually already ran this before the

[03:29] video so let's just see how it looks

[03:31] let's open up the file browser go to

[03:33] input

[03:34] and as you can see this 27 megabyte

[03:36] video has been

[03:37] reduced to 9.1 megabytes which is

[03:40] already a very nice savings but we can

[03:42] do better now there's a few different

[03:44] codecs that you can use whenever using

[03:46] ffmpeg

[03:48] and a video codec is basically what

[03:50] compresses the video down and there's

[03:52] different kinds of video codecs you can

[03:54] use some are more modern than others and

[03:56] some of them will be more efficient than

[03:58] others but the most common video codec

[04:00] for the web is going to be h264

[04:03] so in this command let's also add dash c

[04:06] colon v

[04:07] and this is shorthand for allowing us to

[04:09] select the codec and the default codec

[04:11] is going to be lib x 264

[04:14] and this is going to be the h.264 video

[04:18] codec and as you can see this is going

[04:19] to have the best compatibility with

[04:21] every single browser

[04:23] so almost every browser can support this

[04:25] just fine and so at the bare minimum you

[04:27] will want to have this format when

[04:29] putting your videos on the web and there

[04:30] are some other formats that i will show

[04:32] you for example h.265

[04:35] which is more modern but as you can see

[04:37] it has a lot less support it's actually

[04:39] only available in apple devices and

[04:42] there's one more that i'll show you vp9

[04:44] and this also has pretty good

[04:46] compatibility

[04:47] but there are a few browsers that it

[04:49] doesn't work in but let's start with

[04:51] h.264

[04:52] and so this is not going to have the

[04:54] best compression the file size is going

[04:56] to be a little bit bigger than other

[04:57] ones

[04:58] but this will be the fallback in case

[05:00] your users are using an old browser that

[05:02] doesn't support a newer codec so first

[05:05] things first let's just try this one so

[05:07] that's what this libx 264 is and then

[05:10] we'll also want to pass in the quality

[05:12] so we're going to type in dash crf and

[05:15] this is going to accept a number from 0

[05:17] to 51. 0 is going to be the best quality

[05:20] 51 is going to be the worst quality so

[05:22] we want something kind of in the middle

[05:24] there and so you can play around with

[05:25] this a little bit

[05:26] but for me personally something around

[05:29] 24 is going to be pretty good

[05:31] it the file size is not going to be too

[05:33] big and it's still going to be good

[05:34] quality so this is what i would

[05:36] recommend and finally let's just pass in

[05:38] one more option it's going to be dash

[05:41] mov flags

[05:43] and then fast start and this is

[05:45] basically just going to help your videos

[05:46] load faster for the web it will kind of

[05:48] push some information to the beginning

[05:50] of the video so whenever your users

[05:52] first start the video is going to load

[05:54] faster than if you didn't include this

[05:56] flag and we can go ahead and run this

[05:58] it'll take a couple of minutes

[06:00] but it will give you something

[06:02] like this so the other video was 9

[06:04] megabytes and we've gotten it down down

[06:06] to 7.7 megabytes

[06:09] that's already a lot better that is

[06:10] about a third of the file size of the

[06:12] original but of course we can do even

[06:14] better and so next up after h.264

[06:17] let's go over vp9 and so the vp9 codec

[06:21] can only be stored inside a webm video

[06:23] format it can't be used inside an mp4

[06:26] video format so we'll just be saving it

[06:28] as a webm file format that's not a big

[06:30] deal so we're going to change the codec

[06:32] to c

[06:33] v

[06:34] and then lib vpx

[06:37] dash vp9 that is going to get the vp9

[06:40] video codec which is going to be more

[06:42] optimized than the h.264 video codec and

[06:45] of course we'll pass in the same options

[06:47] here rescaling 1920.

[06:49] we can leave out the dash move flags

[06:51] fast start that's because with vp9 it's

[06:54] already going to be optimized for the

[06:55] web so you don't really need to add

[06:57] anything additional

[06:58] and of course you would just

[07:00] change the output to webm right here and

[07:03] finally we'll want to add dash crf

[07:05] like we did with the other one to set a

[07:07] quality for this one so this one is on a

[07:09] scale from 0 to 63 so we can change the

[07:12] quality a little bit so for me

[07:13] personally i use

[07:15] a crf of 40 for this one

[07:17] and at least for me visually it looks

[07:19] the same as the previous one

[07:21] so the quality is still there but let's

[07:23] run this and see what it looks like

[07:26] and so

[07:28] this one is going to be 7.7 megabytes

[07:30] but the command that we just ran is

[07:32] going to be only 3.8 megabytes so that's

[07:34] already a big savings

[07:36] and if we open this up the quality is

[07:38] still going to look pretty good i have

[07:40] no complaints about the quality

[07:42] if you look really closely it's not

[07:44] going to look as pristine as the

[07:45] original

[07:46] but for a video on the web that's going

[07:48] to be in the background i think this is

[07:50] more than enough personally now let's do

[07:52] the final file format which is going to

[07:53] be h265 and to be honest this one is a

[07:56] little bit optional like i said this is

[07:58] only available on

[08:00] apple devices

[08:02] so let's see h.265 that's just because

[08:04] this video format is not royalty free so

[08:07] basically apple is the only company

[08:09] that's willing to pay

[08:10] to use this in their software but it is

[08:13] going to be even more optimized let's

[08:15] just bring this up

[08:16] and

[08:17] as you can see it's down from 3.8

[08:19] megabytes to 2.9 megabytes so this one

[08:23] is optional but if you want to get a

[08:24] little bit more for your apple customers

[08:26] then i would recommend doing this one as

[08:28] well and so this command is going to

[08:30] look similar to the h.264 command that

[08:32] we ran

[08:33] the only difference is of course we've

[08:34] changed the

[08:35] codec to 265.

[08:38] we've changed the crf to be 28 a little

[08:40] bit higher and the quality will look

[08:42] similar to the h264 and we've just added

[08:45] an additional flag here dash tag colon v

[08:49] hvc1

[08:50] and that's just so that these will work

[08:51] on apple devices if you leave this out

[08:53] it may not work everything else is the

[08:56] same

[08:56] and so you can run that and get this

[08:59] right here which is going to be the

[09:01] smallest file size

[09:02] and of course remembering all these

[09:04] commands is going to be a big headache

[09:06] so what you can do to make your life a

[09:07] little bit easier is you can write a

[09:09] script like me

[09:11] or you can just borrow my script i'm

[09:12] going to have a link in the description

[09:14] for this but basically what this batch

[09:16] script is doing is you pass in a few

[09:18] arguments

[09:19] and then it will do all the work for you

[09:21] so it will run all the commands that it

[09:22] just told you with all the flags that i

[09:25] just told you and of course this is not

[09:26] set in stone you can change the crf

[09:28] values if you want these are just my

[09:30] personal preference you can play around

[09:32] with them a little bit more if you want

[09:34] to but you can run the script like this

[09:36] i would just type op video that is the

[09:38] name of my script you can name it

[09:40] whatever you want

[09:41] and then the input file which is going

[09:43] to be skyscrapers.mp4

[09:45] the resolution so 1920 pixels across

[09:49] and then the directory where you want

[09:51] the output to go so in my case i'm a new

[09:53] folder called videos and that is where

[09:56] they will go once they are all done

[09:58] transcoding

[09:59] and you can just enter this wait a few

[10:01] minutes for all those to encode and you

[10:03] know have three videos ready to go so

[10:05] that's how i do all of my video

[10:06] conversion now it is very fast and easy

[10:09] and so we can go in here open up a file

[10:10] browser see all the videos that is

[10:12] created and last but not least let's

[10:14] actually put them inside html file so

[10:17] you can see how this looks

[10:19] i have an index.html here and the way

[10:21] you're going to want to put all these

[10:22] files is like this so you're going to

[10:24] want to have a video tag

[10:26] and then

[10:27] three separate source tags or one for

[10:29] however many videos you have and so of

[10:32] course we have the best optimized video

[10:33] on top here and the lowest optimized

[10:36] video on the bottom

[10:37] so it will try to read this file if it

[10:39] can't then it will go down to here and

[10:41] if you can't read this then finally

[10:43] it'll go down to the fallback right here

[10:45] and you would just put the type of the

[10:46] video in here so this is an mp4 and then

[10:49] the codex just so that the browser will

[10:51] know which video to get

[10:53] and so for me personally

[10:55] it is going to get the webm video

[10:57] encoded with vp9 as you can see this is

[11:00] the only one that is loading

[11:02] it's not loading the h265 because i'm

[11:04] not on an apple device and your browser

[11:06] will be smart enough to get the

[11:07] appropriate video and that's about it so

[11:09] there are more things that you can do to

[11:11] optimize the videos even further but

[11:13] this will probably be enough for most

[11:15] people so all the commands that i gave

[11:17] you

[11:18] say in the script per se

[11:20] these are designed to give you the best

[11:22] quality

[11:23] with the least amount of file size

[11:25] without taking too long to encode so if

[11:28] you want you can get an even better

[11:29] quality with some additional options but

[11:31] just keep in mind that it's going to

[11:32] take even longer to encode all of these

[11:34] videos if you do something like that so

[11:37] just encoding all of these videos for a

[11:39] 15 second clip this normally takes about

[11:42] seven minutes to do all of these but if

[11:44] you follow this article i'll leave a

[11:46] link to this in the description this is

[11:47] a very well written article that helped

[11:50] me a little bit in making this video he

[11:52] personally recommends passing in a dash

[11:54] preset flag and setting it to very slow

[11:57] and what this will do is it will tell

[11:59] the compression to really take its time

[12:02] whenever it's compressing the video and

[12:04] so you're going to get the best quality

[12:06] but very slow does live up to his name

[12:08] and it takes an extremely long time to

[12:10] compress your video so you can add that

[12:12] flag if you really want the best quality

[12:15] it all depends on if you have maybe 30

[12:17] minutes an hour to compress all these

[12:19] videos and you can go even further i'll

[12:22] also leave links to more of these in the

[12:24] description but if you want maybe you

[12:26] can encode these with a two pass

[12:28] encoding method in my experience that

[12:30] gives you an even smaller file size so

[12:33] you can do more to optimize it even more

[12:35] but

[12:36] it's totally up to you if you want to go

[12:37] the extra mile for me just these

[12:39] commands are enough but just know that

[12:41] the options are available to you if you

[12:43] really want

[12:44] that's all there is to it now you can

[12:46] make websites and have your users enjoy

[12:48] your websites loading a lot faster than

[12:50] before because just as important as

[12:52] having a website that looks good is a

[12:54] website that works well never sacrifice

[12:56] aesthetics for a miserable user

[12:58] experience

[12:59] and hopefully this video helped you put

[13:01] some videos on your website the right

[13:02] way