Video Compression for the Web: A Basic Primer

Recently I've gotten some questions from clients (and for years from students) regarding the best method for compressing video for posting on the web. While the technology of video compression is always changing, and doing an article on what exact settings and CODECs to use would be dated in the next year or so, there are some basic rules and concepts to consider when compressing video, and so I thought I'd jot some of these down.

This post will deal with non-streaming movie creation using Quicktime Pro and its included CODECs. I'm not into all that DiVX stuff, nor am I into other proprietary formats. I am a lazy cheap-ass. Nevertheless, the basic tenets discussed here should apply to most web-video situations. If you really don't want to worry about all this, your best bet is a YouTube-like solution. But if you're interested, here's what I know.

The Basic Idea
There are two basic goals of compressing video for the web, and they are intertwined: maintaining the highest quality and finagling the lowest file size. So, at the heart of it all, you are considering file size and quality, and the relation between these two factors.

The CODEC (COmpression-DECompression scheme) that you choose is hugely important to the quality and file size of your video. Each year more efficient CODECs appear on the scene. This is great news for would-be video posters, but it does confuse the issue to some extent. I won't go into a lengthy description of the various CODECs available as it would only be obsolete by year's end. I will say that, generally speaking, the newest video CODECs for web compression are usually the best, but they also require the latest version of the media player in order to view them, as you'll soon see.

Quicktime "Options" Window: Select a CODEC and a Frame Size
(click image for larger view)

A brief breakdown of the latest and greatest CODECs for the web:

  • Sorenson 3
    The venerable Sorenson 3 CODEC has been around for years. It's fairly efficient, creating reasonably small videos at reasonably good quality, though motion and transitions are usually very blocky. It's compatible with Quicktime 5 and later, so if you need to reach the widest possible audience, Sorenson 3 is a good bet.

  • H263
    This is the same CODEC once used by default in Quicktime Broadcaster for streaming live video. It's a very nice CODEC. File sizes are dramatically smaller than Sorenson 3, and the quality is comparable. I find that H263 enhances contrast a great deal, though, so in some ways it may not look as good as Sorenson 3, but it still holds up fairly nicely. And transitions look better in H263. H263 is compatible with Quicktime 6 and up.
  • H264
    This is one of the latest and greatest CODECs. H264 is a variant of MPEG-4 (know as MPEG-4 Part 10 in some circles) and is very similar to the MPEG-2 CODEC used for DVDs. But H264 is twice as efficient. That is, H264 can deliver twice the image quality for the same file size as MPEG-2. Or, put another way, H264 can deliver video equal in quality to DVD at half the size. Twice as efficient. Get it? H264 (or some variant of it, maybe, I forget the details) is planned for use on HD DVDs. But it's also a great web CODEC. Just remember, it requires Quicktime 7 or later to encode and view.

Quicktime CODECs: So Many from which to Choose
(click image for larger view)

What to Consider
After you've chosen your CODEC, and depending on what that CODEC is, you will have numerous options and settings from which to choose for creating video of optimal size and quality. What is "optimal" for you will depend on your particular circumstance. If you have file size restrictions, that will obviously come into play. And you surely have quality requirements that are unique to your situation and aesthetic values.

Despite the huge number of settings available for the various CODECs, there are really only a handful that are of utmost importance when encoding video for the web. They are:

  • Frame Size
    The number one way to reduce the size of your video is to reduce the frame size — that is, the actual size, in pixels, of the image. Standard DV-NTSC video has a frame size of 720x480. Cutting this in half will drastically (by half, in fact) reduce the size of your video file. Yet 320x240 is still plenty big by web standards. If necessary, you can go even lower.

  • Frames Rate (fps)
    The frame rate (or frames per second) setting refers to the number of video frames that will play each second. (Really. I swear.) Adjusting the fps can greatly reduce the file size, yet has little appreciable affect on video quality. In fact, the video image itself goes unaltered. When reducing fps, frames of video are simply removed. Playback will be a bit less smooth than normal, but this is generally considered acceptable when it comes to web-based video. Reducing fps to around 12-15 can give you huge reduction in file size. You can even go as low as 10 fps and still have things looking pretty decent.
  • Quality
    The quality setting refers to the amount of data removed from each individual image in your video, each frame. This affects the overall quality of the video the most, but also has a significant affect on the file size, and is the setting that requires the most care. High and medium settings are usually pretty good looking; things tend to go steadily downhill from there, but maybe not so much that it is a problem for your particular situation. You'll need to judge for yourself here.

H264 Settings
(click image for larger view)

Do a Test; Do Some Math
That brings me to my sagest piece of advice on this topic: Do a test. Seriously. There's no way for you to figure out the file size-to-quality ratio without testing it out a bit. There's no set standard. I recommend copying a minute-long section of your video project to a new Quicktime movie and testing with that. Testing on a minute-long clip will make the math easier for calculating the size of the final file, but you really could use any length if you're not afraid of the math. You're just trying to get an average (which is really all you can get anyway, as web CODECs are generally variable bit CODECs whose output will vary in size d epending on the type of images in your video). So take your minute-long test clip and export it using a variety of settings. You can multiply the minute-long exports by the actual length of your final movie file to get a ballpark figure for the final file size. Find the best balance between these settings — the best balance of file size and quality — for your needs. It's a pain, but it's worth it. And don't forget to write down your optimal settings for next time.

So those are the basic concepts and settings to consider when compressing video for the web. Hopefully this helps someone out. If anyone has information to add to this topic, I'd love to hear about it in the comments section. I am by no means and expert on the subject and am always curious to hear people's experiences.