---
title: 'How to Optimize Videos for the Web with FFmpeg'
source: 'https://youtube.com/watch?v=G1_7LnbJdR0'
video_id: 'G1_7LnbJdR0'
date: 2026-06-15
duration_sec: 0
---

# How to Optimize Videos for the Web with FFmpeg

> Source: [How to Optimize Videos for the Web with FFmpeg](https://youtube.com/watch?v=G1_7LnbJdR0)

## Summary

This video demonstrates how to optimize videos for websites using FFmpeg, reducing file size while maintaining quality. The presenter shows how to compress a 27 MB video down to under 3 MB using different codecs and settings.

### Key Points

- **Problem: Large video files** [00:00] — A 27 MB video is too large for a website; it needs to be optimized to improve load times.
- **FFmpeg introduction** [00:59] — FFmpeg is a command-line tool for video processing, installable via package managers.
- **Basic usage: scaling** [01:20] — Use `-vf scale=1920:-2` to resize video to 1080p while maintaining aspect ratio.
- **Remove audio with -an** [02:50] — The `-an` flag strips audio metadata, saving additional file size.
- **H.264 codec for compatibility** [03:48] — H.264 (libx264) is the most compatible codec for web browsers.
- **CRF quality control** [05:10] — CRF (Constant Rate Factor) ranges from 0 (best) to 51 (worst); 24 is recommended for H.264.
- **Fast start for web** [05:41] — `-movflags faststart` moves metadata to the beginning for faster video loading.
- **VP9 codec for better compression** [06:17] — VP9 (libvpx-vp9) offers better compression than H.264; output as .webm. CRF 40 recommended.
- **H.265 for Apple devices** [07:52] — H.265 (libx265) provides even smaller files but only works on Apple devices. CRF 28 and `-tag:v hvc1` required.
- **Automation script** [09:02] — A batch script is provided to run all three encodings automatically with customizable CRF values.
- **HTML integration** [10:14] — Use multiple `<source>` tags inside a `<video>` element, ordered from best to fallback, with appropriate `type` attributes.

### Conclusion

Optimizing videos with FFmpeg using multiple codecs (H.264, VP9, H.265) and proper HTML integration ensures fast loading and broad browser compatibility.

## Transcript

all right when you're making a website
oftentimes you want to have some sort of
video on your website maybe you want to
have a video background for your home
page that's very trendy
or maybe you want to have some video
showcasing your product that you want
people to buy
in any case adding a video to your
website will make it look very nice
but of course when you're adding a video
you need to optimize it
because this video right here well let
me just show you what i have here i have
a video called skyscrapers
and is a very nice video of some
skyscrapers going by
that is a fine looking video but the
problem with this is it is 27 megabytes
and i don't know about you but
i don't want my videos to have to
download 27 megabytes of video just to
see my home page and so in this video
i'm going to show you how you can
optimize this bring it down to a
reasonable file size while still keeping
the quality good because of course if
you have a video on your website you
want it to look nice that's the entire
point and today we're going to achieve
all this and more with this program
called ffmpeg which you may have heard
of before
but it's going to be a command line
application
that you can install with your favorite
package manager so
it's going to be in all the official
repositories so just pick whichever
package manager that you're using
it is as simple as that install that and
once you have it installed
i will show you how you can use it and
the most basic usage will go something
like this ffmpeg dash i and this is
going to be your input file which
we already said is skyscrapers.mp4
and probably the most common
optimization that you would like to make
to some video is just to
change the resolution so this video is
originally 1440p
and i'd like to get it down to 1080p so
i want to make the resolution 1920 by
1080 pixels
and we can do that by passing in this
dash vf flag
this is basically shorthand for saying
uh add this filter and the filter that
we're going to be adding to this is
scale so we want the scale to be 1920
that is going to be how many pixels
across that i want this video to be
and then you can also pass in the height
here
but to be honest you probably just want
to keep the aspect ratio the same you
don't want to have to do the math so you
only really have to type in the width
and then you type in
dash 2 and this will automatically set
the height based on the aspect ratio and
the negative 2 is just saying that we
want to keep the height
even integer so we don't want it to be
1081 pixels
in height we want to be 1080 pixels in
height just because if it's an odd
number you can run into some issues with
some video players so that's the only
reason i'm putting negative two instead
of negative one and then you would just
type the output file right here this is
the file that we wanted to create so
let's say we want to make output.mp4 and
one more flag that you can optionally
add in here is dash a n
what this flag will do is it will remove
all the audio information in this video
file so for this specific video it
doesn't have any audio and i don't want
it to have any audio because
let's say in this example i just wanted
to be a background video of course it's
not going to have any sound but even if
your video doesn't have any sound then
it may still have some audio information
so dash and will just strip out all that
information and no additional metadata
or anything about audio so that will
save you a little bit on your file size
and let's just run this and see what
happens now this will take a minute or
two so
i actually already ran this before the
video so let's just see how it looks
let's open up the file browser go to
input
and as you can see this 27 megabyte
video has been
reduced to 9.1 megabytes which is
already a very nice savings but we can
do better now there's a few different
codecs that you can use whenever using
ffmpeg
and a video codec is basically what
compresses the video down and there's
different kinds of video codecs you can
use some are more modern than others and
some of them will be more efficient than
others but the most common video codec
for the web is going to be h264
so in this command let's also add dash c
colon v
and this is shorthand for allowing us to
select the codec and the default codec
is going to be lib x 264
and this is going to be the h.264 video
codec and as you can see this is going
to have the best compatibility with
every single browser
so almost every browser can support this
just fine and so at the bare minimum you
will want to have this format when
putting your videos on the web and there
are some other formats that i will show
you for example h.265
which is more modern but as you can see
it has a lot less support it's actually
only available in apple devices and
there's one more that i'll show you vp9
and this also has pretty good
compatibility
but there are a few browsers that it
doesn't work in but let's start with
h.264
and so this is not going to have the
best compression the file size is going
to be a little bit bigger than other
ones
but this will be the fallback in case
your users are using an old browser that
doesn't support a newer codec so first
things first let's just try this one so
that's what this libx 264 is and then
we'll also want to pass in the quality
so we're going to type in dash crf and
this is going to accept a number from 0
to 51. 0 is going to be the best quality
51 is going to be the worst quality so
we want something kind of in the middle
there and so you can play around with
this a little bit
but for me personally something around
24 is going to be pretty good
it the file size is not going to be too
big and it's still going to be good
quality so this is what i would
recommend and finally let's just pass in
one more option it's going to be dash
mov flags
and then fast start and this is
basically just going to help your videos
load faster for the web it will kind of
push some information to the beginning
of the video so whenever your users
first start the video is going to load
faster than if you didn't include this
flag and we can go ahead and run this
it'll take a couple of minutes
but it will give you something
like this so the other video was 9
megabytes and we've gotten it down down
to 7.7 megabytes
that's already a lot better that is
about a third of the file size of the
original but of course we can do even
better and so next up after h.264
let's go over vp9 and so the vp9 codec
can only be stored inside a webm video
format it can't be used inside an mp4
video format so we'll just be saving it
as a webm file format that's not a big
deal so we're going to change the codec
to c
v
and then lib vpx
dash vp9 that is going to get the vp9
video codec which is going to be more
optimized than the h.264 video codec and
of course we'll pass in the same options
here rescaling 1920.
we can leave out the dash move flags
fast start that's because with vp9 it's
already going to be optimized for the
web so you don't really need to add
anything additional
and of course you would just
change the output to webm right here and
finally we'll want to add dash crf
like we did with the other one to set a
quality for this one so this one is on a
scale from 0 to 63 so we can change the
quality a little bit so for me
personally i use
a crf of 40 for this one
and at least for me visually it looks
the same as the previous one
so the quality is still there but let's
run this and see what it looks like
and so
this one is going to be 7.7 megabytes
but the command that we just ran is
going to be only 3.8 megabytes so that's
already a big savings
and if we open this up the quality is
still going to look pretty good i have
no complaints about the quality
if you look really closely it's not
going to look as pristine as the
original
but for a video on the web that's going
to be in the background i think this is
more than enough personally now let's do
the final file format which is going to
be h265 and to be honest this one is a
little bit optional like i said this is
only available on
apple devices
so let's see h.265 that's just because
this video format is not royalty free so
basically apple is the only company
that's willing to pay
to use this in their software but it is
going to be even more optimized let's
just bring this up
and
as you can see it's down from 3.8
megabytes to 2.9 megabytes so this one
is optional but if you want to get a
little bit more for your apple customers
then i would recommend doing this one as
well and so this command is going to
look similar to the h.264 command that
we ran
the only difference is of course we've
changed the
codec to 265.
we've changed the crf to be 28 a little
bit higher and the quality will look
similar to the h264 and we've just added
an additional flag here dash tag colon v
hvc1
and that's just so that these will work
on apple devices if you leave this out
it may not work everything else is the
same
and so you can run that and get this
right here which is going to be the
smallest file size
and of course remembering all these
commands is going to be a big headache
so what you can do to make your life a
little bit easier is you can write a
script like me
or you can just borrow my script i'm
going to have a link in the description
for this but basically what this batch
script is doing is you pass in a few
arguments
and then it will do all the work for you
so it will run all the commands that it
just told you with all the flags that i
just told you and of course this is not
set in stone you can change the crf
values if you want these are just my
personal preference you can play around
with them a little bit more if you want
to but you can run the script like this
i would just type op video that is the
name of my script you can name it
whatever you want
and then the input file which is going
to be skyscrapers.mp4
the resolution so 1920 pixels across
and then the directory where you want
the output to go so in my case i'm a new
folder called videos and that is where
they will go once they are all done
transcoding
and you can just enter this wait a few
minutes for all those to encode and you
know have three videos ready to go so
that's how i do all of my video
conversion now it is very fast and easy
and so we can go in here open up a file
browser see all the videos that is
created and last but not least let's
actually put them inside html file so
you can see how this looks
i have an index.html here and the way
you're going to want to put all these
files is like this so you're going to
want to have a video tag
and then
three separate source tags or one for
however many videos you have and so of
course we have the best optimized video
on top here and the lowest optimized
video on the bottom
so it will try to read this file if it
can't then it will go down to here and
if you can't read this then finally
it'll go down to the fallback right here
and you would just put the type of the
video in here so this is an mp4 and then
the codex just so that the browser will
know which video to get
and so for me personally
it is going to get the webm video
encoded with vp9 as you can see this is
the only one that is loading
it's not loading the h265 because i'm
not on an apple device and your browser
will be smart enough to get the
appropriate video and that's about it so
there are more things that you can do to
optimize the videos even further but
this will probably be enough for most
people so all the commands that i gave
you
say in the script per se
these are designed to give you the best
quality
with the least amount of file size
without taking too long to encode so if
you want you can get an even better
quality with some additional options but
just keep in mind that it's going to
take even longer to encode all of these
videos if you do something like that so
just encoding all of these videos for a
15 second clip this normally takes about
seven minutes to do all of these but if
you follow this article i'll leave a
link to this in the description this is
a very well written article that helped
me a little bit in making this video he
personally recommends passing in a dash
preset flag and setting it to very slow
and what this will do is it will tell
the compression to really take its time
whenever it's compressing the video and
so you're going to get the best quality
but very slow does live up to his name
and it takes an extremely long time to
compress your video so you can add that
flag if you really want the best quality
it all depends on if you have maybe 30
minutes an hour to compress all these
videos and you can go even further i'll
also leave links to more of these in the
description but if you want maybe you
can encode these with a two pass
encoding method in my experience that
gives you an even smaller file size so
you can do more to optimize it even more
but
it's totally up to you if you want to go
the extra mile for me just these
commands are enough but just know that
the options are available to you if you
really want
that's all there is to it now you can
make websites and have your users enjoy
your websites loading a lot faster than
before because just as important as
having a website that looks good is a
website that works well never sacrifice
aesthetics for a miserable user
experience
and hopefully this video helped you put
some videos on your website the right
way