Compressing Videos For The Web

1. Adobe Media Encoder: Hey, I'm Jake Bartlett and in this quick class, I'm going to show you how I compress videos for the web. I'll be using Adobe Media Encoder, which comes with the Creative Cloud subscription, as well as a free alternative called MPEG Streamclip. So let's jump right in. My preferred method of compressing videos is Adobe Media Encoder. It comes with Adobe Creative Cloud, it works super well with Premiere and After Effects, and it has a ton of great features. So I'm going to give you a quick rundown of how I use Adobe Media Encoder to compress a video for the web. The first thing I have to do is bring video into Adobe Media Encoder so that I can compress it. For this class, I'm going to be using this video as an example. It's a lyric video that I made a while ago. It's Full HD, 1920 by 1080 and 29.97 frames per second. I compressed it using the ProRes 422 HQ Codec, which gives really high-quality but very large file size. If I take a look, it's over five gigabytes for a three-minute file. That's really big and way too big to be sharing online. So I need to bring it in the media encoder so I can compress it. Under the Queue, I'll double-click. On the desktop I have my video. I'll click "Open" and the video is now part of the queue. A great feature of Media Encoder is that you can queue up multiple videos and even multiple output modules and then hit "Encode" and walkaway while it does all the work. Now there are hundreds of features that media encoder has that I could tell you about. But instead of covering everything, I'm just going to show you the specific things that I look for when I'm compressing videos for the web. But there are some basic things about the program you should understand if you've never used it before. 2. Video Settings: First of all in my queue, we have my video file and underneath this, we have a column that says format. These are all the different formats that I'm able to convert my video to. Right now it's set to H.264, which is a great compressor, and it's the one we'll be using. It produces MP4 files and can be uploaded directly to YouTube or Vimeo. But if you ever need to convert to a different format, this is where you could select that. Next is the preset, and we'll get to that in just a minute. Then we have the output file column. This is where you can determine where it's going to export your video. So I'm going to leave mine on the desktop and you'll see that the extension is no longer. mov, it's.mp4, and that's because we've set H.264 as the format. Then finally we have the status column, which is telling us this video is ready to be encoded. So how do we control the settings for the compression of this video? Video hosting websites have different guidelines for compression settings to produce the best results after uploading, and you can find those guidelines on YouTube and Vimeo and other video sharing sites. But the great thing about Adobe is that they've gone ahead and made presets in Media Encoder for YouTube and Vimeo. So if we come over to the preset browser and look at the system presets, there are a whole bunch of different categories, and at the bottom is web video. I'm going to open that up, and inside we have YouTube, Vimeo, and Facebook, three very popular places to be posting videos. Let's start with YouTube. I'm going to open that one up, and inside of YouTube we have multiple presets for different types of outputs. I don't want to scale my video down at all from the source. It's 1080p, and I want to keep it that way. So I'm going to choose the YouTube 1080p preset. I'm going to click and drag that onto my output module, and you see that updates my preset. Now if I click on that preset, it opens up another window with my export settings for the video. In here, I can scrub through my timeline, I can set in and out points if I wanted to export just a portion of my video, but that's not what I want to do in this case, so I'm going to leave that just how it is, but over here is where we can change all the settings for the compression. Now again, there are tons of settings, but I'm only going to walk you through the ones that really matter for uploading to the web. First of all, up here you see we have format and preset, just like in our queue, format preset. We can change those settings from within the export settings dialogue. I'll leave those two set toward their app, because that's what I want. Down here we have the output name again just like before, so we can always change where it's going to save the file or what it's going to name the file. Then we have these checkboxes, Export Video and Export Audio. My animation has both video and audio, so I'm going to leave both of those checked. Then we have a summary of all the other settings. I'm going to collapse that for now, and we'll move down to these tabs. The first tab is effects. I don't need any of these settings, and chances are you don't either. The only one that I've ever really used is time code overlay, which does exactly what it sounds like. It's completely customizable and very handy if you have a client who's requesting time code. But like I said, I don't need that in this export. So I'm going to move straight on to video. This is where I spend most of my time adjusting settings to get what I want. First, we have the basic video settings. This is where we control the width and the height. So we got 1920 by 1080, and that's what I want it to be. So I'm not going to change that. But let's say I wanted to scale it down to 1280 by 720. Well, first I would check this box right here to link the width and the height, so I keep the proportion, then I would click and type in 1280, and I've got 720. Now to get back to my full HD, I could type in 1920 or I can come over to this check box and click and that checkbox along with all of these other ones on this side, mean match source. So it's going to look at what my source videos resolution is, and then locked the width and height to that resolution. Since I'm not changing my resolution, I'm fine with matching the source on that property. Next we have frame rate, and again, this is grayed out because the Match Source checkbox is checked. But if I uncheck that, I could change it to any of these frame rates. Again, this is a property I don't want to change, so I'm going to leave Match Source checked. Then we've got the Field Order, which for an H.264 and Adobe Media Encoder has to be progressive. So that's why I don't have the option to change it, then I can change the aspect ratio. But because it's going to web, I want to leave it at square, then we have options for NTSC or pound, and then we have our profile and level settings. For the H.264 compression, there are different profiles and levels of that compression that allow you to constrain the resolution in bit rate of your file. The easiest way to think about it is that a higher bit rate of compression for your video file means you need a higher profile, which gives you a larger file size, and the higher your resolution is, the higher the level that's required, which also increases your file size. So to get the smallest file size with the best quality, it's important that you match the profile and the level to the resolution and bit rate that you're outputting to. Fortunately, I'm basing my compression settings off of Adobe's preset for YouTube at 10 ADP. So I'm just going to use what Adobe is suggesting for the profile on the level. Finally, we have render at maximum depth, and if you look at the tool tip, it says rendering and maximum bit depth improves the videos quality but increases how long the encoding takes. I don't know why Adobe would leave that unchecked, because only thing you have to lose is that you're encoding might take a little bit longer, but what you have to gain is better quality. So I recommend that you always have rendered at maximum depth checked. I'll scroll down to the next setting. Next step we have bitrate settings. Now the bit rate is how you limit the amount of data that's allowed per second in your video. So the higher the bit rate, the higher the quality, and the higher the file size. Adobe suggests that you use the target bit rate of 16 megabits per second, and it's important to note that this is megabits per second, not megabytes per second. So if I have 16 megabits per second, I'll open up Google real quick, and I'm going to type in 16 megabits to megabytes, and Google converts that for me, 16 megabits per second is two megabytes per second. So that's important to realize that megabits and megabytes are two totally different units of measure. So our bit rate encoding is set to VBR, 1 pass, and that means a variable bit rate, 1 pass. That means that media encoder is going to analyze all of the frames of your footage as it's compressing, and change the bit rate based on what it's seeing in your video to produce the smallest file size and the highest video quality. One Pass means it's only going to go through your video once during that process. If I open this up, you see that we have CBR, which stands for constant bit rate, and if I were to choose that median encoder does not change the bit rate at all. Whatever you put in as your target bit rate is what the bit rate will be through the entire video. But we also have variable bit rate 2 pass. What that does is goes through your video two times to optimize the video compression and give you even better quality. So this is what I recommend you use. It's what I use almost every time. Now media encoder is suggesting that the target bit rate for a 10 ADP video on YouTube is 16 megabits per second, and I trust them. But if I was fine with a larger file size, I might increase the maximum bit rate to something higher, maybe 24, and that's basically just giving Media Encoder wiggle room to increase the bit rate if the video file needs it. But like I said, I trust Adobe on this one, I'm going to leave it set to 16. Finally, we have our advanced settings, which just has keyframe distance. Now this might be a little bit confusing if you're used to animating because this type of keyframe is not the same as an animation keyframe. In compression, a keyframe is a frame that the compressor will look at as a whole. So let's say this is a keyframe. Media Encoder is going to look at all the pixels and analyze it. Then it's going to go to the next frame, and it's going to say what's the same in this frame as the keyframe. Based on your compression settings, Media Encoder is going to try to leave as much of the information from the keyframe in the next frame as possible because that produces a smaller file size. So if I had my keyframe distance set to 90, it's only going to look at a whole frame every 90 frames, and all the frames in between it are going to be compressed based on that one key frame. So the more distance you put between each key frame, the more likely your video file is going to start artifacting. The smaller this number is, the better looking your video will be because there'll be less compression degradation happening between each key frame. If all that went over your head, it's totally fine because my recommendation is that you leave this unchecked so that Media Encoder uses every frame as a keyframe, and doesn't reuse any of the data between frames. I found that that produces the best quality compression in my videos. That's everything under the video tab, but right below that is a checkbox that says use maximum render quality. Now Adobe claims that this is just to give better quality scaling. But I did a little bit of research online and people claim that it also produces sharper looking motion. While I've never noticed that personally, I think it's kind of silly to lead a checkbox named that use maximum render quality unchecked. So I check that box every time. So now my video settings are completely prepared. 3. Audio Settings, Presets & Encoding: Next I'm going to move to my audio tab. Again, I trust Adobe 100 percent on pulling the best compression settings for YouTube, from the YouTube guidelines. I'm not going to change any of these settings, but if you know anything about audio and you want to change something specific, this is where you would do it. I never use the rest of these tabs, they're for doing more advanced things and they're unnecessary for what I'm trying to do. If you wanted to you could set up a Facebook account, an FTP, Vimeo or YouTube account, and post directly through media encoder, but personally I like to do it through the actual website interface myself. Now that I have my video and audio settings set, I can take a look down here at the very bottom, and media encoder is going to give me an estimated file size, and its saying the resulting file will be 360 megabytes. If you remember, my original video file was over five gigabytes. That's a great compression rate. Now that I've modified all these settings to be what I want them to be personally, I want to save it as my own preset so I can reuse it in the future. To do that, I'll come up to my export settings, and under preset it now says custom, instead of the YouTube preset I picked out, and I'll come over to this first button right here, which is Save Preset. I want to name this in a way that lets me know the key settings that this compression is made up of. I'll start by typing out the format H.264, that'll do a dash. I want the resolution to match the source, so I'm not going to type anything out, but if it was a specific resolution, that's where I'd probably list that out. Same thing goes for the frame rate, since it's based on the source, I'm not going to type anything out for the frame rate, but I will put in a bit rate. I'll say 16 megabits per second, and that should be good. I'll click OK, and then I'll click OK to get out of here. Under my preset browser, if I look under user presets and groups, see that I've got H.264, 16 megabits per second, which is what I just made. That's also showing up under the preset over here. I can know that whatever video I apply this to, it'll change the format to H.264 and use a data rate of 16 megabits per second. Because it's my preset, I know other things like two-pass encoding, maximum render quality and maximum depth are all enabled. Now all I have to do is click this button to start my encoding and media encoder will compress my source QuickTime and export an MP4. But let's say I also wanted to compress for Vimeo. Well, let me open up those settings and grab the Vimeo 1080p HD, and drag that not on top of my existing preset, but just below it where you see that blue line shows up and I'll let go. Now I have two output modules for the same source video. From here I could go into the Vimeo settings and make adjustments however I'd like. Once everything is set, I would just click Play and both of these outputs would be compressed from my source video. Maybe I change the file name of this one to Vimeo, and the file name of this one to YouTube. That way I know which file goes where. Now I'll click Start Queue, and you see that down here in my output preview, media encoder is showing me where it is at each output modules compression, and it gives me an estimate for how long it's going to take to export each one. I'm going to fast-forward through this encoding process. Now that's done I can take a look at my desktop and see my two exports, we've got Vimeo, YouTube, and my original. Again I've got over five gigabytes for the original, 377 megabytes for YouTube, and 422 for Vimeo. That's because Vimeo had a higher bit rate setting in the presets the media encoder already had. Now the video you're watching right now of me teaching is compressed itself. I can't really show you a quality difference between the original and the actual compressed version, but if you were to do this yourself with your own video, you would definitely be able to see a compression difference, but it's still extremely close to the original, and I'm very happy with the results. That's definitely going to be a preset I'm going to want to use again and again. 4. AE and Premiere: From here I just make presets based on whatever outputs that I use most regularly. It's all a balance of video quality and file size. If a client I'm working for doesn't need it in full HD video for the previews, typically I'll mark the resolution down to 1280 by 720, so I can lower the bit rate to reduce the file size. If I were to change the resolution but leave the bit rate the same, the file sizes is pretty much going to stay the same because the level of compression is equal. Make sure that you don't confuse resolution with file size. Another great thing about Media Encoder is that it's linked up very nicely with Premiere and After Effects. Here in After Effects, I have my compressing GIFS class title animation, and it's just over five seconds long. All I have to do to get this to Media Encoder is coming to composition, add to Adobe Media Encoder Queue. I'll click that and there you see that my compressing GIFS title has showed up and it has the icon of After Effects, so I know that it's dynamically linking to After Effects. I'm going to get rid of that first video since I don't need it anymore. This is set to Vimeo 1080p HD. But I'm going to drag over the preset that I just made. H.264 16 megabits per second, then I'm going to tell it to go on the desktop. I'll hit "Encode". Now you see it says, "Connecting to Dynamic Link server" because Media Encoder actually has to work through the After Effects renderer to export this composition. But as you can see, it's handling it just fine. This way, I don't have to export a less compressed version before I compress it for the web. Now that's done, let's take a look. The file size is only 6.8 megabytes and the quality looks awesome. That's perfect for uploading on the web. Now let's say that I was working on a much larger project like this mutemath lyric video. This is over three minutes long and it's made up of a whole lot of effects with 3D, lens flares, all kinds of graphic intensive stuff. Now Media Encoder could handle this, but it's definitely not the workflow that I recommend. The reason why is because if I sent this to Media Encoder and compress the whole thing, I know it would take multiple hours to finish and then I'm stuck with just a compressed version of the video. If I find out after I've rendered export it and compress the entire thing in one step through media encoder that something was wrong, I'd have to re-export the entire thing again after I make that fix. Instead, what I'll do is export it out of After Effects and a much less compressed format like ProRes. Watch that QuickTime and make sure everything with it is fine, then I'll bring that file into Media Encoder and compress it from there. That's exactly what I did when we were building our presets in Media Encoder. That was the ProRes QuickTime that I exported out of After Effects. Now let's say that something was wrong with that export out of After Effects. Well then I would come over to Premiere and import that QuickTime, drag it into a new sequence, find wherever that mistake is, fix it inside of After Effects, export just that portion laid over this video clip in the sequence, and then export it from here. But because I'm working with ProRes files, I don't need to export another ProRes version. I can send it straight to Media Encoder from Premiere. To do that, I would come up to File, Export, Media, and you'll notice that we have all the same video settings that we did inside of Media Encoder. This export settings Window is exactly the same. In fact, I can even come up to the presets and find my H.264, 16 megabits per second preset that we made earlier. I can apply that and I could export directly from Premiere. Sometimes that's fine. The only thing is when Premiere is exporting, I can't do anything else inside a Premiere. Whereas if I send it to Media Encoder, I could continue working in Premiere or After Effects while it's compressing. Instead of hitting "Export", I'm going to hit "Queue". Just like After Effects, that dynamically links the Premiere sequence into Media Encoder and shows me the Premiere icon. I've got my preset here and I could change it just like any other file. Make sure that it goes on the desktop, and I'll say underscore Premiere. Hit "Play" and Media Encoder works just the same way. As you can see, Media Encoder has tons of options and lots of integration that makes it extremely nice to work with. That's why I always use Media Encoder. 5. MPEG Streamclip: Now Adobe Media Encoder is included with Creative Cloud. If you have a Creative Cloud subscription, you already have access to it, but if you don't have a Creative Cloud subscription, and you don't have access to Media Encoder, there are free alternatives. My free alternative of choice is MPEG stream clip. It's extremely easy to use, very efficient and produces fantastic results, to get it, just go to squared5.com, which you can find the link in the notes of the video right now, it's free for both Mac and PC, so just download whichever one you need. Just like Media Encoder, We need to open up a file, before we can do anything. I'm going to drag my same progress quicktime into my MPEG stream clip, it opens it up and allows me to scrub through it If I come up to file, you see that we have lots of different choices for how you can export videos. If you needed to export to a specific format, you can make that choice. I'm going to be exporting to an MP4, just like in Media Encoder. I'm going to click on that, and here we have our compression settings. Now again, there are a whole lot of options on this window, but I'm just going to tell you about the ones that you need to know in order to compress videos that look nice when you upload them to places like, YouTube and Vimeo. All right, so first of all, we have the compression set to H.264, which is what I want, the quality set to 50 percent, so I'm going to go ahead and drag that all the way up to 100 percent. I'm going to leave multi-pass in B frames off, because in my experience, when you have multi-pass checked, MPEG Stream Clip will continue to do one pass after another when it's compressing and never end. I don't know why this happens, I've tried to research it online and I cannot figure out why it doesn't end after two or three passes. I'm going to leave that unchecked. Then I want to limit my data rate because if I don't, the file size will be pretty large so I can type in whatever data rate I want, and choose the units. If I take a look at my options, we have kilobits per second, megabits per second, and you can download their bits because it's a lowercase b. Up here we have an uppercase B, which is kilobytes per second and megabytes per second. The reason it's important to distinguish these two is because, there are actually eight bits in a byte and eight megabits in a megabyte. That's why if you hear an internet service provider tells you that you're getting a 100 megs per second download speed, that doesn't mean you're getting a 100 megabytes, because internet speed is measured in megabits, you're actually getting an eighth of that. Since Media Encoder was working in megabits, I'm going to go ahead and just select that, and type in 16, just like we didn't Media Encoder. Right away, MPEG Stream Clip gives me an estimated file size, 359 megabytes is a great file size for YouTube or Vimeo. For the sound, I only have two options, AAC or no sound. So I'm going to leave that at AAC, so the audio comes through. I do want stereo audio, not mono. I'll leave the sample rate set to auto so that it just inherits the sample rate from the audio of the source video, and I want the highest possible quality for the audio compression, so I'll leave that at 256 kilobits per second. For the frame rate, you could type in a custom frame rate here, but if you leave it blank, it just inherits the source. I don't need a frame blend or downscale, so I'm going to leave those unchecked. Then we can go over the frame size. By default, it's set to unskilled, which is what I actually want, but I could change it to anything I want any of these presets, or type into customer resolution. If I were to set this to one of the custom resolutions like 1280 x 720, and I made a preset from these settings, any video I put into this preset will always export at 1280 x 720. If I leave it set to unskilled, any video I put in will remain the same size when you compress it. I know that I want to save this preset with an unskilled resolution, so I'm going to leave it set there, at unskilled. Now my video is progressive, it's not interlaced, so I want to make sure to uncheck interlaced scaling, and I don't need to deinterlaced video. The field dominance can be left at upper field first. I don't need to rotate, zoom, crop pan, anything like that, but those controls are there if you ever needed to, and now I'm ready to compress my video so I could click make MP4, but before I do that, I'm going to say this is a preset. Click on New, say yes, and then type in, "H.264 - unskilled - 16 Mbps", and then the audio compression rate of 256 kilobits per second. I'll click Okay, then I'll click Save, Yes, and now that preset saved. I can load it for any future compression, then I'll click make MP4, it'll ask me where I want to put it. I'll just type in, "MPEG Stream Clip", Hit Enter, and we've got this exporter preview, which shows us where we are in the video, as well as a progress bar that also tells us where we are in the compression. I don't need to see a preview of where the compression is. I'm going to close it, and if anything, that'll just take a little bit more load off of my processor so we can focus on compressing. Once this is done, all the compressed video ready to upload to the web. All right, the compression is finished, let's take a look at the file size. We've got 375 megabytes very close to the estimated file size and the compression looks great. Again, you can't really trust the quality of what you're looking at, because the video you're watching now is actually compressed as well, but I can tell you it's very close to the original. It's fantastic quality for the internet, and that's all there is to MPEG Stream Clip. That's all there is to compressing great looking videos for the web. I hope that you've enjoyed this class, and I would love it if you'd let me review. If you have any questions at all, please ask them on the "Ask Me Anything" thread on community page, and I'll be happy to help you out. Once you've made your own compression preset, tested out on a video, upload it to the internet and share it on your project page. Thanks again for taking this class and I'll see you next time.