How to Optimize Multimedia to Speed Up Web Pages

Multimedia makes up only a small portion of server requests but accounts for the majority of traffic on the Internet. So, the optimization of streaming media—and movies in particular—has become more important in maximizing web page speed and reducing bandwidth bills.

Tip

Behind the scenes, multimedia authors create a reference movie that points to different sizes of movies. The reference movie gets the speed of the user's connection from the QuickTime Control Panel to select the right movie. Users usually don't know to set this parameter, however, and the bandwidth of the user is generally not tested. Thus, broadband users typically see tiny, low-quality movies. Thankfully, in the newer version of the QuickTime Control Panel, there is a new default setting of "automatic"; although this is helpful for those who don't know to set their speed, you should change your connection speed setting to match your connection type, that is, modem, DSL, cable, and so on.

Optimizing videos 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 videos 10 to 30 minutes long automatically loaded and playing into home pages, some 50 MB to 175 MB in file size. Although this may grab the attention of high-bandwidth users, it is better to respect your visitors' bandwidth and provide a static placeholder image and a play button.

Take a look at the Apple.com website for an example of a best practice regarding showcasing video to a potentially wide-range audience. Apple takes the approach of allowing users to choose different size movies to better match their bandwidth abilities. Sizes from "small" (320 x 240 pixels) to "HD" (1,920 x 1,080 pixels) can be viewed. Overall, this was a lot of up-front work for Apple; it had to compress one movie many different times, into many different sizes. However, the extra work pays off with satisfied site visitors who are able to find content that meets their needs and the amount of bandwidth available to them.

Video frame rates and dimensions. Higher frame rates (frames per second, or fps) increase the fluid motion of the picture. However, each frame rate has 50% more data per frame than the next lower frame rate, for the same file size. To sacrifice some fluidity for greater usability by more viewers, you can reduce the frame rate to as little as 8 fps. However, frame rates lower than 12 fps to 15 fps have been shown to reduce users' perception of video quality.¹

The minimum dimensions should be 320 x 240 pixels. Anything smaller has little impact and will be harder to view. For users on a fast connection, you can offer a 640 x 480 pixel video. To maintain quality, increase the data rate in proportion to the image size using the following formula (especially with H.264):

Data rate =(frames per second * movie width * movie height) / 30,000

This translates to:

DR = (FPS * W * H) / 30,000

Remember that doubling image size (320 x 240 to 640 x 480) requires a 4x (not 2x) increase in data rate. For example, a 320 x 240 movie with 15 fps needs to be compressed to about 38.4 KB of data per second, whereas a 640 x 480 movie at the same frame rate needs to be compressed to about 153.6 KB of data per second to maintain quality. We'll talk more about compression next.

Video production tips: Minimize noise and movement. To create highly optimized videos you must start with the original, high-quality video files.

You can think of video creation as a war against unnecessary digital noise in your content. The more noise in your video, the less it can be compressed, and the larger the final result. The less movement there is, the lower the noise; and the less fine detail in the background, the smaller the video. Here are some tips on creating high-quality videos that optimize well:

• Minimize camera motion with a tripod if possible.
  
• Minimize subject motion.
  
• Use a lot of light.
  
• Use a simple background or blur the background (avoid background movement).
  
• Avoid camera pans and zooms.
  
• Use professional equipment.
  
• Use a digital format.
  
• If a tripod is not an option, use a gyroscopic stabilizer or an image-stabilized lens.

Editing your video. After you've captured your video with minimum noise, it's time to edit out unnecessary frames and test for playback. Break up longer videos 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. Here are some additional tips:

• Reduce dimensions to web standards.
  
• Use the minimum frame rate for smooth playback.
  
• Crop fuzzy edges.
  
• Reduce video noise (with filters).
  
• Adjust contrast.
  
• Adjust gamma level (for cross-platform viewing).
  
• Restore black and white.
  
• Deinterlace.
  
• Choose the best codec for the job that you are trying to accomplish.

For example, if you are compressing video for the Web, choose a web codec such as H.264 or WMV. If you are simply archiving your video for later use, try the Photo-JPEG codec. There are about 30 different codecs, and they each have a different use. Where you plan to deliver your video should determine the codec that you select. H.264 is one of the best for web and small device playback, such as a video phone, so we'll focus on that here.

Compressing videos for the Web. Now that you've got your video prepared and adjusted, you can compress it. People are more accepting of temporal compression (over time) than spatial compression (frame per frame). You must compress the size of your video so that it can be successfully streamed or downloaded to your target audience. This process is called encoding in the industry, and it is full of hard, interdependent decisions:

Streaming media format
QuickTime versus RealMedia versus Windows Media

Supported playback platforms
Windows versus Mac 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; CD quality, cassette tape quality, or cell phone quality

Codec
H.264 versus Sorenson versus WMV (the current leaders)

You'll need to make some decisions to give the best compromise between quality and size. QuickTime Pro provides a fast and convenient way to create optimized videos. For more control, you can use Autodesk's Cleaner. Sorenson Video 3 Pro can sometimes make videos smaller than H.264 at similar quality. Finally, Telestream's Episode Pro offers maximum control over video compression with the ability to compress to H.264, Flash, iPod, and other formats (see the image below, "Episode Pro optimizing a video"). It is an excellent application and can batch-compress into all the popular formats and workstreams.

The image below, "Optimizing a video in QuickTime Pro" shows the settings we used to optimize a test video in QuickTime Pro.

The unoptimized 30-second video was 6.8 MB and the optimized version was 816 KB at 360 x 240 and 544 KB at 234 x 156 pixels in dimension. Because H.264 is what we recommend as the best codec, we will expand on its specifics.

The image, "QuickTime Pro standard video compression settings" shows the standard video compression dialog for QuickTime Pro. You can see that we have chosen H.264 as our compression type. It's helpful for you to understand this dialog's three main sections: Motion, Data Rate, and Compressor.

Episode Pro optimizing a video



The Motion section is where you can choose the frame rate (in fps) and the key frames. If you are planning to compress your video, you might want to choose something other than Current in the Frame Rate box because Current does not remove any frames. A good starting point is 15 fps; this alone results in a 50% reduction in size for video that is 30 fps (or, more accurately, 29.97 fps).

Also in the Motion section is a Key Frames area. A key frame is a frame of uncompressed data from which the frames in between the key frames key off. So, if you set the key frames to 15 (and your frame rate is 15 fps), you will be creating an uncompressed frame every second.

Figure 6.6. Optimizing a video in QuickTime Pro



Tip

Always set your key frames to a multiple of your frame rate! For example, if your frame rate is set at 15 fps, you will want to set your key frames to 15, 30, 45, 60, 90, and so on.

H.264 has a great automatic key frame option that is worth trying. Also, you should make sure the Frame Reordering box is checked (unless you are using a real-time encoder for a live broadcast).

Next is the Compressor section, where you'll find three options: Quality, Encoding, and Temporal. However, note that you don't see the Temporal option in the image below, "QuickTime Pro standard video compression settings" because it's a hidden option that we will explain how to find shortly.

The Quality area is where you can control the look of individual frames. Set it to Medium and compress, and then see how large your movie is. You will be surprised how good a Medium setting can look. For Encoding, always click the "Best quality (Multi-pass)" radio button. Yes, it takes twice as long, but your movie can be half as small in file size.

QuickTime Pro standard video compression settings



Now, here is how to show the hidden Temporal slider. Put your cursor over the Quality slider and press the Option key (on a Mac) or the Alt key (on Windows). Notice that when you press the Option key the slider changes to read Temporal (see the image below, "Temporal compression slider"). This means you can separate the spatial (frame-per-frame look) from the temporal (smoothness of playback or quality of delta frames).

Temporal compression slider



The last section of the dialog is the Data Rate section. We recommend that you click the Automatic radio button for your first try, but if you want to try to make your movie smaller you can lower the data rate. Use the table below, "Video resolution and frame rate guidelines" for reference.

Video resolution and frame rate guidelines

Use scenario                   Resolution and frame rate     Example data rates
Mobile content                 176 x 144, 10–15 fps          50–60 Kbps
Internet/standard definition   640 x 480, 24 fps             1–2 Mbps
High definition                1280 x 720, 24 fps            5–6 Mbps
Full high definition           1,920 x 1,080, 24 fps         7–8 Mbps

Closing credits. Creating optimized videos for the Web requires a number of coordinated steps.

First, create a clean, noise-free video with the minimum possible number of zooms, pans, and background detail and movement. Then prepare your video for compression by cropping fuzzy edges, adjusting contrast and gamma, and deleting any unnecessary frames. Finally, compress your video with a high-quality compressor such as Episode Pro. Use the data-rate formula (FPS * W * H)/30,000 as a starting point, and always use a two-pass variable bit rate (VBR) and a multiple of 10 times your fps for your key frames.

Flash optimization tips

Some typical problems we see with Flash are unoptimized images and too many frames instead of tweened symbols. A tween is the calculation of all the changes between frames, which is more efficient than having a lot of frames instead (see the image below, "Creating a Flash motion tween"). You can significantly reduce the file size of Flash movies by optimizing your images in Photoshop, not in Flash. Reduce the number of frames, minimize the number of fonts, and tween between symbols.

Creating a Flash motion tween



[1] Gulliver, S., and G. Ghinea. 2006. "Defining User Perception of Distributed Multimedia Quality." ACM Transactions on Multimedia Computing, Communications and Applications 2 (4): 241–257.