Web Video Compression
This document provides an introduction to encoding video for the web. It covers the formats, dimensions and bitrates recommended for videos to look good and play back across all major browsers and devices. It does not cover specialized topics such as adaptive streaming or x264 parameters.
Formats
As we find with images (JPG, PNG, GIF) and sounds (WAV, MP3, AAC), videos are available in many different formats today: MP4, FLV, AVI, WebM, MOV, et cetera. Different from images and sound formats, video formats consists of not one but three building blocks. Thus, when we use the term format, we are referring to a combination of:
- The container format that wraps the audio and video codecs, but doesn't contain the raw data itself.
- The video codec which contains the actual, encoded video frames.
- The audio codec which contains the actual, encoded audio samples.
The better the video and audio codecs are, the smaller and easier to process the resulting video file is, without sacrificing quality. Here is a short list of today's most widely used video formats:
- The MP4 format, with H264 video and AAC audio.
- The WebM format, with VP8 video and Vorbis audio.
- The FLV format, with VP6 video and MP3 audio.
All three formats are of excellent quality, with MP4 generally seen as the best and FLV as slightly outdated.
Where these formats differ greatly are with the browsers and devices that support their playback. Here is an overview, using data from StatCounter and RiaStats:
| Browser/device/plugin | Install Base | MP4 | WebM | FLV |
|---|---|---|---|---|
| Flash Plugin | 95% | Yes | - | Yes |
| Firefox HTML5 | 25% | - | Yes | - |
| Chrome HTML5 | 25% | Yes | Yes | - |
| IE9 HTML5 | 10% | Yes | - | - |
| Safari HTML5 | 4% | Yes | - | - |
| iOS HTML5 | 4% | Yes | - | - |
| Opera HTML5 | 2% | - | Yes | - |
| Android HTML5 | 2% | Yes | - | - |
As you can see, the MP4 format is the most widely supported one. Firefox and Opera currently don't support it, but the Flash plugin can still be used in these browsers (Flash is installed everywhere but iPad/iPhone). MP4 is also widely supported on niche mobile (BlackBerry, Symbian, Windows Phone) and set-top (XBox, PS3, AppleTV) platforms.
WebM, a fairly new format, is interesting because it is royalty-free and open source. Its footprint is still small though. FLV only works on Flash and should, in general, no longer be used. Overall, MP4 is the best option today.
Dimensions
Formats aside, the dimensions of a compressed video largely define how good it looks. Here is an overview of the most important ones for online video (2:1 scale):
Though bigger is often better, a tradeoff is made. Larger videos are hard to decode; many mobile phones (or old desktops) will not be able to decode videos around and above 360p. If you choose slightly smaller dimensions, e.g. 480x272 (16:9 ratio), your compressed video will always work on:
- All desktop computers, using Flash Player or HTML5.
- All iPad, iPhone and iPod touch models.
- All Android and Windows phones and tablets.
- All media players, game consoles and set-top boxes.
If your source video is not using the default 16:9 aspect ratio, you can easily make it slightly larger than the proposed 272px height. If, for example, your source is in 4:3 aspect ratio, you can make your compressed video 480 by 352 pixels.
If your source video is high quality, you can also build a 720p HD version of your video. This is nice for fullscreen desktop playback, and for the iPad. Do not load that version by default, since many computers and devices cannot play it. Load the smaller version by default and offer the 720p HD through something like an HD button.
Bitrates
Another important compression setting is the bitrate of a video: the amount of bandwidth it uses per second. Videos should download fast enough to be played back in real time, otherwise users see constant stuttering. Luckily, broadband internet is common in many countries today. Its speed of at least 2000 kbps (kilobits per second) is already sufficient for 720p HD video.
For mobile internet, the speed depends upon your reception and network type. With a good reception, the older 2G networks have an average speed of 150 kbps, today's typical 3G networks average 800 kbps and the up-and-coming 4G networks now do about 2000 kbps.
For MP4 videos to look good (i.e. no visible artifacts), here are some target video bitrates. Don't use them as hard rules, but do a few tests with your video and use the smallest bitrate that looks good. Note the heights are all multiples of 16, since video is usually encoded in blocks of 16x16 pixels:
| Dimensions | Interviews / screencasts | Shows / presentations | Trailers / music / sports |
|---|---|---|---|
| 320x176 pixels | 150 kbps | 300 kbps | 450 kbps |
| 480x272 pixels | 200 kbps | 400 kbps | 600 kbps |
| 640x368 pixels | 400 kbps | 700 kbps | 1000 kbps |
| 800x448 pixels | 600 kbps | 1000 kbps | 1400 kbps |
| 1280x720 pixels | 1000 kbps | 1600 kbps | 2200 kbps |
Of course the audio has to be compressed to a sane bitrate too. For AAC, a value of 96 kbps should suit all purposes. For a size of 480x272 pixels, the average trailer/music/sports video will then use 700 kbps overall. That still fits the average 3G connection.
Tools
If you don't yet have a tool for transcoding your videos, you should download HandBrake. It is a free desktop tool for Linux, MAC and Windows that contains many settings beyond the scope of this guide. Creating the 480x272 video described above is easy though:
- Select your source video using the Source button.
- Set the destination of the encoded video using the File box.
- From the Presets drawer, select the iPhone & iPod Touch preset.
- In the Quality field, set a constant quality of about 20 (good) to 25 (decent). This feature automatically sets a good video quality, resulting in the bitrates from above table.
- Check the small Web optimized box. It ensures the metadata of your video is written at the start, so Flash can swiftly see its duration and dimensions.
- Now click the Start button and see your encode getting built!
Repeat these settings for the 720p HD compression, but use the Regular » Normal preset instead of the iPhone/iPod one. If your source video is larger than 1280x720, you can scale the output by clicking the Picture Settings button.
Note that many other tools and services are available for encoding your files. An easy-to-use hosted service is our own Online Video Platform Bits on the Run. It is free for low-volume usage and allows you to encode videos in MP4, WebM and FLV format. See this guide for more details.
If you want more control over the encoding process and don't mind investing some money, you can look into a desktop tool like Sorenson Squeeze or an online service like Zencoder.com. Both offer many output formats and many settings for tweaking the quality and filesize.