The Secret to Encoding High Quality Web Video: Tutorial

I like making money as much as the next guy, but the last three or four consulting clients all shared a problem so basic that I was almost embarrassed to take their money. Specifically, they came to me concerned about poor video quality, and the simple fact was that the data rate of their video was just too low. You’d feel guilty charging for that nugget of knowledge, too, wouldn’t you?

The problem is that while there are many factors that contribute to video quality, if the data rate is too low, video quality will be sub-par. And there’s nothing that even a high-priced consultant can do about it.

Why? Briefly, all streaming video codecs are “lossy,” so the more you compress, the more quality you lose. There are two ways to control how much you compress; 1) the assigned data rate and 2) the resolution of the video. That is, a video data rate of 500 kbps could be great for video that’s 480×270 resolution, but would look awful at 720p or higher. You could mess with frame rate as well, but I recommend encoding at the native frame rate of your video, not at 12 or 15 frames per second.

The Secret to High-Quality Video Encoding? Bits-Per-Pixel Value

– Determining the Best Data Rate for Compression:

So, when you’re encoding at different resolutions, how do you know the necessary data rate for acceptable quality? The secret is the bits-per-pixel value. This is shown in Figure 1 (below), which is an analysis of a video file encoded by CNN, and the circled value is the bits per pixel in each video frame, or .091.

Figure 1. Bits per pixel as calculated by MediaInfo.

As the name suggests, the bits-per-pixel value is the amount of data allocated to each pixel in the video. The formula is the per-second data rate (510 kbps in Figure 1) divided by the number of pixels per second in the video, which is frame rate times width times height (29.97x576x324). Or, you can just analyze the file like I do. The tool used to analyze the file above, by the way, is MediaInfo, a free utility that runs on the Mac and Windows platforms and is installed on every single one of my computers. You can watch a tutorial about MediaInfo and Bitrate Viewer, another tool I use a lot, here.

So, how much is enough? Well CNN distributes a lot of video, and if they say .091 is right for mostly talking-head news-type video, that’s good enough for me. Just for the record, ESPN streams their sports highlights at about .175, so the more motion in the video, the higher the bits-per-pixel value needs to be to produce acceptable quality video.

– Factoring in Video Resolution:

The other variable is resolution. While the .091 for low motion and .175 for high motion are good rules of thumb at SD resolutions, the required values go down at higher resolutions. Why? Simply stated, codecs get more efficient at higher resolutions, so the bits per pixel value typically goes down as the resolution goes up. By what amount? Microsoft’s Ben Waggoner, a respected compressionist, uses the power of .75 rule. Here’s a snippet of an email he sent to me explaining the rule.

Using the old “power of 0.75” rule, content that looks good with 500 Kbps at 640×360 would need (1280×720)/(640×360)^0.75*500=1414 Kbps at 1280×720 to achieve roughly the same quality.

In my book, Video Compression for Adobe Flash, Apple Devices and HTML5, I used this rule to create data rate tables for both 4:3 and 16:9 video produced at multiple resolutions at 24, 25 and 29.97 frames per second. Choose a resolution and I’ll tell you the data rate to use, or vice versa. If you’re not hip on how to calculate fractional exponents, you’ll find those tables very helpful.

There are also tables that detail the resolution, data rate and bits-per-pixel value used by media, business-to-business and business-to-consumer sites in the US and Europe. So, if you want a quick look at some relevant comparables, you have that too. You can see a sample of this in Table 1.

Table 1. Bits per pixel value of European corporate sites.

In the meantime, if your video looks ugly, check the bits-per-pixel value. If it’s under .091 for low-motion video, or .175 for high-motion video (at around 640×480 resolution or below), don’t call a consultant. You either need to boost the data rate or reduce video resolution to increase the bits-per-pixel value and subjective video quality. Again, don’t try dropping the frame rate from 29.97 to 15, because you can introduce more problems than you solve.

At the other end of the spectrum, if you have low-motion video and your bits-per-pixel value is over .13, or high-motion video with a bits-per-pixel value of over .2, you should try encoding at lower data rates. You should get very similar quality, and will save bandwidth costs and make your video accessible to viewers with slower connections.

Have Something to Say? We're listening!

Want to chime in on this article? Share your thoughts with us on Facebook or Twitter.