Web Video Optimization Tips – optimize streaming media for website videos

While streaming-media files make up only a small portion of the total web objects on the average web page, less than 1.3% according to Levering & Cutler (2006), a small fraction of streaming media is responsible for nearly half of the streaming media traffic (Chesire et a. 2001). In fact, YouTube is responsible for about 10% of all traffic on the Internet (Nowak 2007) and is growing at over 162% a year (see Table 1). Consequently the optimization of streaming media, movies in particular, is important to minimize load times, reduce bandwidth bills, and maximize web page speed.

Video Production Tips

To create highly optimizable videos you’ve got to have high quality originals. Video creation can be thought of as a war against unnecessary noise in your content. The more noise in your original, the less it can be compressed, and the larger the final result. Use a high quality digital video camera. Minimize pans, zooms, and subject motion and make sure your subject is well lit. Use a simple background and a solid tripod. Avoid hand-held shots, but if a tripod is not an option use a gyroscopic stabilizer (ken-labs.com) or an image stabilized lens. The lower the noise, movement, and fine detail in the background the smaller the video.

• Minimize camera motion with a tripod
• Minimize subject motion
• Use a lot of light
• Use a simple background
• Avoid camera pans and zooms
• Use professional equipment
• Use a digital format

Video Optimization for the Web

Movies optimized for the web should be short in duration, small in dimension, and optimized with the appropriate codec. We have seen movies that are 12 to 20 minutes long auto-loaded on home pages some 90-150MB in file size! People are more accepting of temporal compression (over time) than spatial compression (frame per frame). You can cut the frame rate from 15fps to 10fps or even 8fps, each frame will have 50 percent more data per frame for the same file size, which will increase the quality of the picture. The minimum dimensions should be 320×240 pixels, anything much smaller has less impact and is hard to view. For users with a high speed connection you can offer a 400×300 pixel video. To maintain quality, up the data rate in proportion to the image size. Remember that doubling image size (320×240 to 640×480) requires a 4X (not 2X) increase in data rate.

Use this data rate formula to help target your movie for the right delivery medium (especially with H.264).

Data Rate = (frames per second) X (movie width) X (movie height) divided by 29000

This translates to DR = FPS * W * H / 29000.

For example: A 320×240 movies with 15 frames per second needs to be compressed to about 39.7K of data per second.

After you’ve captured your video while minimizing noise edit any unnecessary frames and add titles and effects. The key to optimizing movies on the web is to break them up into smaller segments that are a few minutes long at most. Edit out the parts of the movie that aren’t essential to your message, crop fuzzy edges, and reduce the dimensions to keep them to a reasonable file size. Use the minimum frame rate that gives an acceptable playback. Finally after editing out nonessential content, reducing dimensions and frame rate, optimize your videos with different codecs to see which creates the smallest acceptable file.

• Crop the fuzzy edges
• Reduce video noise (with filters)
• Adjust contrast
• Adjust gamma level (for cross-platform viewing)
• Restore black and white
• Deinterlace

Compressing Videos for the Web

Now that you’ve got your video prepared and adjusted it’s time to compress it. This is called “encoding” in the jargon of the industry. You must compress the size of your video so it can be successfully streamed (or downloaded) to your target audience. Encoding is the process where this compression happens, and it is full of hard interdependent decisions:

• Streaming Media Format – QuickTime versus RealMedia versus Windows Media
• Supported playback platforms – Microsoft Windows versus Macintosh, or both
• Delivery method – True real-time streaming versus HTTP streaming
• Overall data rate – Compression versus quality versus bandwidth required
• Audio quality – Mono versus stereo.
• Codec – H.264, Sorenson and WMV are the current champs

You’ll need to make some decisions here to give the best compromise between quality and size. QuickTime Pro is a fast and convenient way to create optimized videos. For more control you can use Cleaner, a product made by Discreet (http://www.discreet.com). Sorenson Video Pro can sometimes make smaller videos than H.264 at similar quality. Finally Episode Pro offers maximum control over video compression with the ability to compress to H.264, Flash, ipod, and other formats (see Figure 1).

Each product makes the job easier by wrapping these decisions into an intuitive interface. Here is an example of the settings we used for optimizing a video in Quicktime Pro for a dentist (Fort Lauderdale Dentist) client we have in Florida (see Figure 2).

The unoptimized 30 second video we received was 6.8 MB and the optimized video was 816K at 360×240 and 544K at 234×156, more than ten times smaller.

Conclusion

Creating optimized videos for the Web takes a number of coordinated steps. First create a clean, noise-free video with the minimum amount of zooms, pans, and background detail and movement as possible. Then prepare your video for compression by cropping fuzzy edges, adjusting contrast and gamma, and delete any unnecessary frames. Finally compress your video with a high quality compressor like Cleaner. Use the data-rate formula (W*H*FPS/29000) as a starting point, and always use a 2-pass VBR and a multiple of 10 times your FPS for your keyframes.

Further Reading

Chesire, M. Wolman, A., Voelker, G., & H. Levy (2001), “Measurement and Analysis of a Streaming-Media Workload,”

in Proceedings of the Third USENIX Symposium on Internet Technologies and Systems (Berkeley, CA: USENIX Association, 2001).

King, A. (2007), “Google Dominates Top Video Sites

Speed Tweak of the Week, Website Optimization, LLC, July 16, 2007. With its acquisition of YouTube, Google now dominates the top video sharing sites with over 4.4 times as many unique users as its nearest competitor.

King, A. (2003), Speed Up Your Site: Web Site Optimization

Some sections of this article were derived from Jason Wolf’s chapter “Minimizing Multimedia.”

Levering, R., and M. Cutler (2006), “The Portrait of a Common HTML Web Page,”

In DocEng’06, October 10-13, 2006, Amsterdam, The Netherlands. Paper surveyed over 21,000 web pages for visual features, position, and technology usage. Using a custom HTML rendering engine called WebSeer, the authors took a pseudo-random sample based on the DMOZ directory and found the proportion of image, text, form, and object usage and visual weight for the average web page.

Nielsen//NetRatings

Provided the June 2007 video sharing site data to Website Optimization, LLC.

Nowak, P. (2007), “Google: You ain’t seen nothin’ yet,”

In The National Post. “Forget iPhone, BlackBerry, Bell and Telus. Google is preparing to be the next giant of telecommunications.” A story about how Google is asking the FCC to buy up wireless spectrum. With Google’s infrastructure, it could become a telecommunications giant. Nowak reveals that YouTube accounts for nearly 10% of all traffic on the Internet. June 30, 2007.

Schonfeld, E. (2007), “Top Video Sites,”

According to Nielsen//NetRatings
as of April 2007 the top video sites on the Internet are dominated by Google, who owns YouTube. Yahoo! Video shows the fastest growth rate of the top 12 video sites. Available from the Internet at: http://blogs.business2.com/business2blog/2007/05/top_video_sites_1.html (accessed on July 1, 2007)