When adding video to your site, the original video usually isn't tailored for your web site and is sometimes as much as ten times larger than it needs to be. As a result, your video may take much longer to download or may not play at all in some browsers or on some devices. This tutorial will show you how to use a free program called Handbrake to solve these problems. The first time you use this tutorial, it may take you up to 20 minutes. After that, 5 minutes tops!
Start by downloading Handbrake from handbrake.fr. It is available for Mac, Windows, and other platforms. There are lots of sophisticated options in Handbrake you will probably never use. There are only a few that you need, so don't let all those settings daunt you. Included in this tutorial are instructions for saving a preset, so you may only need to do this full list of instructions once.
- Select a Source - Open Handbrake and select your source video. If Handbrake doesn't prompt you for it, click the Source button in the upper left of the window.
- Select a Destination - Under Destination, choose where you want to save the new version of the video. Handbrake will choose the proper file extension for the file name.
- Output Settings - Under Output Settings, choose "MP4 file" for the Format. MP4 is the most-used video format on the web. There are other formats you might consider in addition to mp4, but mp4 will cover almost everything. Also, check the Web Optimized checkbox. This will get your video to start playing sooner in a web browser.
- Video Settings - You will see tabs for Video, Audio, and other settings. Under the Videotab, make sure the following settings are in place.
- Video Codec: H.264
- Framerate (FPS): Same as source
- Variable Framerate: selected
- Video Quality: Constant Quality
- Video Quality - Compression involves a balance of quality and size. The goal is to aim for the smallest size you can get before you can see a difference in quality. To the right of Constant Quality is a number labeled RF and a long slider. It ranges from 51 to 0 with 51 being horrible quality and 0 being ridiculously huge. All we really care about is getting something between 26 to 23. At 26, you will be able to readily notice the effects of the compression. At 23, you would need to compare your original to the new compressed version frame by frame to see the difference. You would be hard pressed to notice the compression otherwise. If your original is already heavily compressed, of low quality, or you need the best speed you can get, choose 26. If quality is critical and your viewers will mostly be on high-speed connections, choose 24 or 23. If you are going to be doing this a lot, I highly recommend making versions of your video at 26, 25, 24, and 23 and comparing them to find what level of compression you think is best.
- Audio Settings - Under the Audio tab, Handbrake will try to guess at something reasonable for the audio quality. If lower numbers are selected under Samplerate and Bitrate, it may be that your source is only that quality, so choosing a higher quality won't help. In most cases, a Samplerate of 32 and a Bitrate of 128 will work well considering the laptop speakers or earbuds someone may be using to listen to your video. If quality is important, you could set either to something higher, keeping in mind that most people can't tell the difference in quality above 32/128 and higher settings means a larger video file.
- Dimensions and Cropping - Your source video may come with large dimensions, like 1280 x 720 pixels or 1920 x 1080 pixels, when what you really need to fit your page is something much smaller. Let's reduce that. Click the Picture Settings button on the top bar to view the Picture Settings window. First choose, "None" under Anamorphic, then make sure Keep Aspect Ratio is checked. Now you can change the dimensions. Find out what size the video needs to be for your web page. Your web designer should be able to tell you. There are special cases where you might want to use a different size. See the section on Alternate Dimensions below. Once you know the size you need, adjust the Width setting to be the same number or higher than what you need. The Height setting should adjust automatically to match. Make sure Cropping is set to Automatic. It will get rid of black bars on your video. You may close the Picture Settings window.
- Saving a preset (Optional) - If you are going to need these settings again, save them as a preset. Use the Toggle Presets button in the upper right to show the presets window. Click the plus (+) button at the bottom to create a new preset out of your settings. Give your preset a sufficiently descriptive name. If you customized the dimensions of the video and want to include those dimensions as part of the preset, leave Use Picture Settings as Custom with the dimensions listed. If you don't want to save the dimensions, but want all the other settings, choose Source Maximum. The Use Picture Filters checkbox doesn't matter unless you monkeyed with filter settings I didn't cover in this tutorial. Once you have a preset, the next time you convert a video, you will select your preset instead of doing steps 3 through 8. You will 1) select source, 2) select destination, 3) select preset, 4) hit start.
- Start - You've done all the important stuff at this point. What are you waiting for? Click the Start button in the upper left and wait. Depending on the speed of your computer, the size of your video, and a variety of other factors, this may take anywhere from a minute to an hour. The progress bar at the bottom will give you an idea of how long it will take. In the future, if you need to convert multiple video files at once, you can Add to Queue to take care of them all at once.
You did it! Now look at the size of your original and your converted video. Hopefully, the converted version is much smaller in size. Play it on your computer to be sure it works properly and looks acceptable. If it works, upload the new version to Sitemason instead of the original.
Zooming video - If your web site provides an option for zooming the video to full screen, you may want to choose larger dimensions. Keep in mind that the size you choose is probably what everyone will get whether they are on a big desktop screen or a tiny phone screen. If you set the dimensions too big, it will be difficult for people on phones to load the video and they may not benefit from the larger dimensions anyway. If you set the dimensions too small, the video may look blocky to people with big screens. There is no benefit to setting dimensions larger than the original. In general, a width lower than 400 pixels will not look too good on anything unless it is going to be crammed into a small place on your website. A width larger than 1000 pixels is going to create a larger than necessary file. It may look great on big screens, but will be awful to load on slower devices.
Cropping video - Most video will start as a 16 by 9 or 4 by 3 aspect ratio. If your site calls for something different, you can use custom cropping in the Picture Settings window to whittle your dimensions down to fit. This may take some trial and error, but could reduce the file size even further by removing part of the video that won't be seen anyway.