How to make your html background video super small file size

Hi there, in this video it's all about picking the right format for our video, and getting the file size super-duper small. So what we'll do in this video is, we're going to make a group of videos like this, lots of different versions so we can see the differences in file size, and we're going to look at this one, see this one, 10MB, and then it drops off a cliff down to 1.7, and still looks good, I promise. So let's go and do that now.

So, how big is big? 1MB is really small, and good, and 10MB is getting pretty big. Anything over that, you'll have to have a pretty good explanation to convince me that you needed a background video that was that long, unless it's your actual product and it's actually doing stuff, mostly these background videos are kind of supportive graphics, and a really big file size is going to make that website load really slowly, and that in terms of user experience is bad. So, try to get it as small as you can. I try and keep it around the 2MB sort of level, I've seen stuff, like we jumped to the PayPal website, here, you can see their background, one is, they're using quite a big file size, and it's really long, and if you picked through their website, you can see it's about 10MB, so that decided that this particular page is worth 10MB for them.

So back here in Premiere, we're going to start exporting this thing now, and we need to export a couple of different file formats. The main ones are-- the big one is in mp4. It's the most usable, easily shared one. The other ones that you're going to have to do is one called a WebM, so it's W-E-B, and an M, so WebM. Google made that one, and at the moment it's the most common fall-back video format. There's some other ones like the ogg, O-G-G, or O-G-V, now that was meant to be the standard, but at the moment nobody is using it, everyone's using WebM instead. So my advice to you at the moment, in 2017, is that mp4's followed by our WebM; the two formats we're going to need. 

What we're going to do is we're going to export this full background version, and we'll do this one as well, but we'll focus this video on doing the background version, the same rules apply to both of them. So when we export a video, we need to go to-- it's 'Control-M' or 'Command-M' on a Mac, so it's 'File'-- where is it? 'Export', and it's 'Media'. This will export it from this document. Now, if it's grayed out and you can't see it, it's kind of washed out like these ones, it means you don't have one selected. Because we can have different sequences, if you have something selected up here, it doesn't know which one you mean, so you go to 'File', 'Export', and you go-- because it doesn't know which one you mean, so you're going to click on here, and you can tell you clicked on it, you see that blue line around the outside, that indicates, “I mean this guy.” Or you can select on them in the project window too.

So, remember, 'Command-M', this will open up, making use of this window here, it's fine, what we're going to do, is we're going to hit 'Queue', and we can get to the exact same screen in Adobe Media Encoder. If I click 'Export', that little button there, it's going to go off and export it, and I'll have a mp4 when I'm finished, but what I like to do is, pass it on to queueing it, and that just queues it in something called Adobe Media Encoder. It's going to have the same thing, watch this, if I click on 'Match Source', I'm back to that exact same screen, so it doesn't really matter if you adjust it straight out of Premiere, or you do it here in Media Encoder. But I find-- you'll see some perks for this one—it’s going to cancel.

So, what happens is, Adobe Media Encoder looks like this, it adds it to this queue here, and what happens is, is I can queue up lots of different versions, my letter box version, I might have 10 different sizes that I want to make, is that I can queue them up here, and you can keep working in Premiere, that's the nice thing about Media Encoder, is that if you hit 'Export' straight from Premiere, Premiere can't be used until it's finished, so this one here just works in the background. Nice!

So what we're going to do is start looking at file sizes versus comparisons. So what we're going to do is look at formats first, so you want an mp4, and actually you want to go to this one, MPEG4, if you click on it, what you'll find is-- can you see it's a 3gp, looks like an old file format, so it's not the one we want. You want this one called 'H.264'. This-- can you see here? Gives you an mp4, and this is the codec we have to use when we're putting stuff online. 

Now, the big thing we need to change is-- this 'Match Source' is going to be exactly how you downloaded it, and it's going to give us a really, really big file size, but we're going to use it in terms of comparison. So if you've downloaded something from Adobe Stock, and it's 4K, which is just four times the standard HD, they call it 4K, is, it's got to be huge. So we need to make a few changes. Now if you're watching this video, because you got a job to do, and it's due in about 10 minutes, skip this video, click on 'Match Source', go to what says 'Preset', and go to this one which says 'Import Preset', and then go and find the ones that I've made for you. 

So in your exercise files, and there's one under here called 'Encoding Presets'. So, the first one you're going to bring in is, in this case it's going to be mp4, click it, click 'Open', I've already got one, so I'm going to click 'Cancel', and it will appear-- can you see this 'Preset'? It will appear in this list here, click that, click 'Okay', click 'Play', and you'll get something pretty small that will work for your job, so that's my cheating preset, but for the rest of us, we need to learn a little bit about it, just so that we can get our file sizes tweaked as our video.

So, we're going to leave this one as 'Main', 'High bitrate'. What we're going to do is select it-- can you see there’s an option here that says 'Duplicate'. This is a good way; it's just going to export the same video but in different settings. So what I'm going to do is, click one that says 'Match Source', and get this big window here, and what I'm going to show you now is to get the file size super small. First one, and easiest one is 'Audio'. If I turn off the 'Audio', it will lower the file size, and it will stop us having to do it later on, when it comes to our coding, we'll have to hit the mute button, there's a mute option in the code to make it mute, but we won't have to, because there'll be no 'Export Audio'. And to be honest, you don't really want audio playing in the background; I hate it when a website starts up with audio automatically playing in the background, I'm looking for the pause button, if there's not a pause button, it's goodbye, website. 

So what we're going to do is just do some examples, so we're going to call this one-- let's give it the same name; where am I going to put it? I'm going to put it on my 'Desktop', under my 'Video', my 'Example Videos'. And this one's going to be 'designer-full-background', and this one is going to be called 'noaudio', just as a comparison. I'm going to click 'Okay', and I'm going to select him, duplicate him, and we're going to do some other bits. Click on 'Custom'. So we got no audio. Let's look at the big one. The biggest one to reduce file size is down here under the 'Video' tab, scroll down, scroll down, this little guy here, 'Bitrate Settings' is going to devastate the file sizes. So, at the moment, it's on what's called 'High Quality', so it's set to 10 and 12. The lower you go, the lower the quality, but the lower the file size, and what you'll find is that it's really hard to tell the difference between, say 10, and down at something like 1. It's not HD 4K amazing quality any more, but I'm pretty sure, on your laptop screen, you won't even notice the difference. 

So, the file size is at 15MB, this is an estimate, and that can be wildly off, so don't use this as your absolute gauge. Now let's look at this. The first thing  we need to do is, we'll set to a variable bit rate of '1 pass', it just means-- 'Constant Bit Rate' means it's going to be all set to 10. Doesn't check, doesn't go up and down, so click on 'Custom Bit Rate', and you just set it to-- say, set it to '1', and it doesn't care it's going to be 1, the whole way through. 

Now if you go to 'Variable bitrate', it's going to go through, and say, I was defaulting to this before, remember, it was at 10 and 12; it means it will go up and down depending on what's on the screen. Really, detailed bits of video. I'm going to use the higher bitrate, the higher quality, and the stuff that's not moving just gets the lower bitrate, because it doesn't need it, and that can drastically reduce your file size.

So, in terms of this encoding, 1 pass just means it goes through once, and checks it all, and goes-- you're high, you’re low. This thing here, it says '2 pass', does it once, it comes back, and does it again, and what you end up with is smaller file sizes, and better quality. I don't know why you default 1 pass. It takes longer, that's the big thing, so if you're just burning this thing out real quick, you can put it on 1 pass, but there's no point, really.

Now, 'Target Bitrate', what should it be, it's as low as you can go, and you can do some test with your video. If you got some super awesome video from a stock library site, it's probably going to get really low, and look really good still. If you've shot it yourself on your crappy phone, the lower you make it, it's going to look pretty bad, so in our case-- I find-- I pretty much always type in '1', and '1.5'. So just gives it a bit of-- it will target 1, but if it needs 2, it will go up to 1.5; the dizzying heights. Just gives it a little bit of wiggle room. You can see down the bottom here, 1MB, that is magic numbers. And it's all to do with this bitrate.

So let's click-- actually give it a name, so this is 'noaudio', and this 'noaudio', and this is going to be 'noaudio', and what was this one? 'Lowbitrate'. Great! Let's click 'Okay'. So most of that work is done in the bitrate. What I'm going to do is show you some other little things just to get it down even further. You might be dealing with that really big long kind of 2 minute video, and you're going to have to try and get as much as you can out of this, so I'm going to duplicate it again. Click here in 'Custom', and in this case, what I'm going to do is-- so audio is off, my bitrate's already low, I'm going to do a couple of things, one is the 'Frame Rate'. 

So what is Frame Rate? Your video is actually just a pile of static images, and if they flash in front of you fast enough, the human eye believes, and human brain believes that they are live action, but they're not, they're not real world stuff, it's just a bunch of images, like a flick book. 25 frames to the second, where all, hook, line, and sink, it’s convinced, it's moving images, but it's just lots of flashes of separate frames. The lower you go, the more jumpy it gets, the higher you go the smoother it gets.

So, you can get-- say my GoPro shoots-- I think it's 50, or 60 frames/second, and you can get like 1000 frames/second, well at times, 'Matrix' looking things, out of the scope of this one obviously, but 25 frames/sec is what this was set at. You can go lower. Now if you go down to 10, it's reasonably noticeable. I find a nice compromise, it's 15, and in my case, our video is pretty basic; it's big and green, watch this. I should have had this a long while ago. You can see I've slid this along, because it actually gives me a little preview of where I am in my video, and what happens is, when I change things in, say my bitrate settings, this will update; it’s  a reasonably good explanation of it, so, I'm going to set this to 'Fit', so I can see it all.

So, 15 frames/sec, I doubt you'll notice it that much. Especially if it is background, and it's blurred, it's fine. You can go down to 10, give that a check. So I'm going to click on this one, this one's going to be, 'noaudio-lowbitrate', this is going to be a really long file name. This one's going to be 'framerate15'. Great! And, let's click 'Okay'. 

What else can we do? Just click on this one, so duplicated him, click on this guy. The next one we're going to do-- this one is going to be-- we're going to play around with our height and width. So, we're going to, maybe change the height of this one. We'll do 500 pixels height. So what I mean by that is, under the video tab, at the top here, it's actually exporting it HD quality, and that's not what we need in this case; you could, and there's nothing really wrong with that, the only trouble with it is that the way that we're going to do this encode, there's something we're going to use called the 'minimum height', and the 'minimum width'. And it just means that it's not going to be that responsive, it's going to look a little strange. So it needs to be a little smaller. 

So my advice here would be, it's not that full HD; Why? Because you're going to have people looking on this on different devices, and they're not going to be able to see this HD, so it's wasted file sizes; page is going to take a long time to load. So what we're going to do is-- the highest you probably want to go to is 720, which is the-- that's kind of like-- that's the original high definition, more like standard definition. '720 High', and that's the width.

What we're going to do is, we're going to go down even lower, and you can see it kind of fits, let’s go to 100 percent, gives you kind of an idea of the size. You can still see, at '720 High', it's still a pretty big video, right? So I'm going to get this here, and I'm going to change this to '500'. Now it's at a small size, but it's going to kind of be able to stretch and expand to fit the background, and I find that, for a full background, works for me. And the file sizes, it's pretty vague, down here, it's still 1MB. How much do we lose, we'll see when we go and export this one. So changing the size here is not just making the file size smaller, it's just the technique that we have to use at the moment in code, minimum heights and widths of 100%. We'll look at it later on, but you need to make it small enough to be able to be used.

Now there are a few other things you can start doing in here, you can start playing around with 'Key Framing', and these are few other things, and they're getting pretty nerdy, and you can play around with profiles and levels, and Field Order; now that's going to be it in terms of how to get the file size smaller, there's a couple of other things down there like frame rates, progressive loading, that's getting into the super nerdy minutiae, and we're not going to go through it in this course because you're not going to see much difference there’ll be video people out there touching at me, saying, "How dare I?" but, for me, I found, those are the big ones, those are the good ones, let's click 'Okay'.

So now we've got all these different videos, what you're probably going to do is just jump to this last one, this is what my preset set it to. So if you want to use my preset, it's going to jump it to this 500, 15 frames low bitrate. Job done. I’ve queued these ones up just to show us file size comparison, and quality comparison. This is why I love Adobe Media Encoder kickback, hit the play button, and it just chews through them all. Actually it's trying to render them all at the same time. And if I was doing this in Premiere, and I hit the 'Export' button, I have to do them all one at a time, which is not a big deal, they're not super long, but you can see this has been effected. If you're working on a really long video-- I love Media Encoder, you can go off, grab a coffee, come back, if it's super long, and you've got a really crappy computer, you might have to go back, you might have to go to bed, and wake up in the morning, and the render still could be working. That happened to me loads. But the power of internet, let's make this zoom up, ready, 1, 2, 3, go zoom.

All right, so that probably took about 2 minutes, my side. Now let's go and look at what files got created. Let's forget about these two at the bottom here, I'm going to actually open them. So these are the things that got made. So let's order them up, in file size, that is-- actually I'm going to bring those guys back, because that was the original, right? This is me making it gray, this is a good little test, right? So, that's the original video, 18MB, making it gray, removing some of the color, it's 16, then we did it without audio, now the audio doesn't make that big jump. One of the other things that we did is we made it quite dark green. That was one of the things we did, so we lost a bit of file size there, these are the few extra things, and then we went and lowered the bitrate, and there's the big change. Can you see here? You can mess around with frame rates, and stuff, but really it's all about this, bitrate, going from 10 and 12, down to 1 and 1.5. You can see a super manageable file size now. 

Now in terms of the quality, let's have a little look, so I'm hitting space bar here-- actually, what we'll do is we'll open both of them up, I'll stick them side by side, and it's not going to be-- it's not a super scientific example, but you'll get a sense of these two. So I'm going to hit-- so, over here-- let's pick up 'New', let's put this one at the top here, so this is the high quality one, with no audio. Let's have a little look. I know we zoomed out a bit, and it's not a fair example, but you'll have to trust me, they look fine, especially for a background image, and especially because we're not looking for super hi-def, we're looking for page load time. 

It has to look good, not terrible, but it's all about file size, and you can see, bitrate is good; frame rate, got it down a little bit further, so the frame rate's down to 15 seconds. Let's have a look between these two, so, just have a look. You can tell it's a little bit jumpier, but in my case, because my video isn't particularly like-- there's not a lot happening, the dude's just writing, or the girl's just writing a little bit on the notepad, so 15 is fine for me, and also, sometimes that look might look quite cool, you might get down to 10 frames, and it's got that kind of jumpy film grain kind of blurry kind of thing going, so you get file size savings, and it looks kind of cool.

And you can see down here, the actual pixels, making the pixels a lot smaller hasn't done much to the file size either, so why do we go that small? It's so that we can make it responsive later on. Later on, in a couple of years, there's a new bit of tag that comes out, and I'll talk about that later on, that will make it fully responsive, but at the moment we're stuck with min-height, min-width, so we need to make it a little bit smaller than we might have really wanted.

Cool, so we're nearly done. We've done our mp4s, and what we'll do is, we'll cut this video off here, and we'll jump into the next one using the WebM format, not that long, but I'm going to cut that off here, so this video is not epic-ly long. All right, see you in the next one.