The Secret to Encoding High Quality Web Video: Tutorial

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 480x270 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.

The Secret to Encoding High Quality Web Video: Tutorial

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 640x360 would need (1280x720)/(640x360)^0.75*500=1414 Kbps at 1280x720 to achieve roughly the same quality.

The Secret to Encoding High Quality Web Video: TutorialIn 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.

The Secret to Encoding High Quality Web Video: Tutorial

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 640x480 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.


Don't Miss Out - Join Our VIP Video Marketing Community!
Get daily online video tips and trends via email!


About Our Contributing Author - Jan Ozer
Jan Ozer (jan at doceo.com) is a streaming media consultant and frequent contributor to industry magazines and websites on streaming related topics and the author of Video Compression for Flash, Apple Devices and HTML5.



Please Note: Opinions expressed in this article are those of the contributing author and not necessarily that of

Become a Contributor: Occasionally, we like to offer experts within the online video industry the chance to write a post for ReelSEO. We like it because it offers you readers great content, and it comes directly from those in the field that are working on the technologies to power this online video revolution of sorts ;-) If you are interested in becoming a contributing author, please feel free to let us know. Read our post on becoming a contributor for additional information.

What do you think? ▼
  • http://twitter.com/JWDE Jürgen Kaiser

    I've wrote a tiny iPhone app to calculate the data rate for a given resolution and bits per pixel value.
    It's called "Bits Per Pixel" and available for free in the App Store.

    • http://www.reelseo.com/ Mark Robertson

      Nice - thanks for sharing, Ill check it out.

  • Ronald Malvin

    This is for all my geek friends...You know who U-R...LOL.

    • http://www.facebook.com/profile.php?id=1475621786 Sharolyn Malvin Ferebee

      I may not be one of your "geek" friends. 'cause the video wouldn't play for me.... ;-(

  • Ronald Malvin

    hmmm your correct.

  • Dorkyman

    Hey, Jan, I wonder if the .75 rule is really due to increased efficiency. After all, just how much "better" can the encoder do its job if the number of pixels increases from a large number to a larger number?

    I suggest another effect is at work here. I come to this conclusion by remembering my early days exploring Paint Shop Pro and jpeg compression. Take a photo, use a fairly aggressive compression ratio, then examine it with the zoom tool. One quickly discovers that a photo which looks good when viewed from afar (zoomed out) is actually chock full of artifacts when zoomed in.

    So by the same token, a video frame when "zoomed out" (i.e. higher pixel count) will look less artifacty for a given bitrate/pixel ratio than when zoomed in. This means we can get away with using a substantially higher compression ratio for a larger image before artifacts become apparent.

  • http://www.facebook.com/profile.php?id=100001549534461 Svetlana Shodunke

    very useful information.Thank you.

  • http://www.facebook.com/profile.php?id=100000420744392 Sergey Vilkhovchenko

    Fine

  • xylemphloem

    Thank you for this!!! Your book is not in iBooks???

  • http://www.facebook.com/profile.php?id=100001261320302 Curtis Ling

    this is simple stuff just test lowest bitrate for acceptable viewing then stream at that

    i found about minimum acceptable for h264

    640x360 video h264 - 666 kbps 2.76MB/.5 min

    940x540(542) or 1024x576 video h264 - 1200 kbps 4.60/.5min [sd widescreen]

    1280x720 video h264 - 1700 kbps 6.33MB/.5 min

    1920x1080 video h264 - 2500 kbps 9.35MB/.5min

    audio 80 kbps [doesnt really matter tho]
    of couse most sevices steam in sd so ~360p 666/8=83 kB/s
    and you could lower these by a few percent for steaming

  • Newsimphello Newsimp

    the bit rate in the equation of bits per pixel - is it total data rate (which includes audio bit rate as well) or is it only bit rate of the video?