Planning Multimedia

Using multimedia on the Web can be tricky. Without careful planning, you can end up with pages that take a long time to download, look or sound bad, or do not work at all. This section covers some important areas to consider when planning to use multimedia in Web pages.

Bandwidth

As mentioned earlier, the bandwidth available to your clients is a major consideration when designing a Web page. This is especially true for pages using multimedia elements. Audio and video files can be enormous; to use them effectively takes careful planning.

These days, Web pages are being delivered through a variety of mechanisms. While most pages are still delivered relatively slowly over the Internet, fast connections are becoming more common, and high-speed intranets are becoming the de facto standard for most corporations. CD-ROM is also a popular source for Web pages.

If using CD-ROM or an intranet for delivery, you might have considerably more bandwidth at your disposal than if you are targeting standard users on the World Wide Web. For example, many home users still access the Internet at 28.8 Kbps—that is, only 28.8 kilobits per second can be downloaded to the browser (and usually, a sizable fraction of that is lost to overhead, meaning only about 20 Kbps of actual data is transferred). A quad-speed CD-ROM drive (very slow by today's standards) can deliver 600 KBps (600 kilobytes per second), roughly 200 times the amount of data delivered by a modem connection. An average corporate network connection can deliver about 10 megabits per second (more than 1 MB per second), approximately 400 times as much data as an average modem connection is able to deliver. Some corporate networks deliver 100 megabit or even gigabit (1000+ megabit) and faster connections. Fast connections to the Internet are also becoming more and more popular. An ADSL (Asymmetric Digital Subscriber Line) connection typically ranges in speed from 256 Kbps to over 6 Mbps, and some cable modem connections are as fast as 30 Mbps. Files read from a hard drive are transferred anywhere from 5 to 50 megabits per second or more.

There are huge differences (up to several orders of magnitude) in the speeds used to access Web pages. Correspondingly, there are huge differences in multimedia performance because of its need to transfer relatively large amounts of data. The general rule of thumb is to base your work on the lowest bandwidth found in your audience. In other words, if the lowest bandwidth in the target audience is a 28.8 Kbps modem connection, pages should be designed around this limitation, even though other users in the audience might be using higher bandwidth connections. Another approach is to offer a choice between different qualities of multimedia, so that users with a faster connection can access a better version of the file.

Palettes

A palette is simply a specified list of colors. Most graphics and multimedia use some sort of palette. Restricting the number of colors in an image can both reduce file size and improve the appearance of a Web page on systems that display a limited number of colors. The most common situation in which a Web designer makes a choice between palettes is during the creation of GIF files, which all require a palette. The most common palette found in images and other media on the Web is known as the Web-safe palette. This is an 8-bit palette (meaning that there are 256 potential slots in the list of colors) that contains 216 colors and 40 unused entries. Of the 40 unused entries in the palette, 20 are reserved for use by the operating system. The remaining 20 can be used by a designer to add colors to the image that are not in the safe palette. Versions of the safe palette in both the Windows PAL and Adobe Photoshop ACT file formats can be found on the companion CD as \chap17\iesafe.pal and \chap17\iesafe.act. Note that you may find multiple versions of the safe palette on the Web. These different versions should all contain the same colors, though they might be listed in a different order.

Some video files also use a palette. Some perform much better when using a particular palette, while others can be set up to use the Web-safe palette. The palette selection is dependent upon which codec is used to create and play back the video. Codecs are described later in this chapter.

NOTE

---

The exact method used to apply the correct palette to an image depends on the image-editing software being used. The process is different for every application; you may need to consult your image editor's documentation. The process typically involves converting the bit depth of the image (referred to in some programs as the mode) from 24- or 32-bit to 8-bit and choosing the appropriate palette for this conversion.

The Best Media for the Job

Internet Explorer offers many options for media elements. But this flexibility can also make it difficult to choose the best media for a particular task. For example, suppose we want to include an animated image on a Web page. We could use an animated GIF, a video file, a structured graphic, or a MacroMedia Flash file. Before expending the time and effort to produce a media element, we need to decide which one best fits our needs. Let's look at an example of the decision-making process we might use to select an element.

Let's say that our goal is to include a quarter-page, two-dimensional image that appears to be rotating in three-dimensional space. Audio will not be needed. The page needs to work on a 28.8-Kbps modem connection to the Internet, and is targeted only at on-the-road sales staff of a particular company that has specified Internet Explorer as the corporate browser.

Based on that stated goal, we can assess the strengths and weaknesses of the approaches as follows:

• An animated GIF would work, but we would need to create and piece together all the frames of the animation. Because the image is quarter-page, the GIF would probably be rather large.
• At quarter-screen, a traditional video file would be extremely large, even if we used a very low frame rate. Video is sometimes the best option when it is necessary to tightly synchronize audio with images or animation, but in this case audio is not needed.
• If we used a structured graphic, we would need to create the graphic only once, and we could then rotate it on the page using a simple script. The structured graphic file would be quite small, even at quarter-screen, and the download times would be much faster than most other options.
• Flash files can be read by default in Internet Explorer 4 and later, and can be read in other browsers as well (though this usually requires downloading a Flash viewer). The files are typically very small, and the download size (like for structured graphics) is not dependent on the display size. The major problem with Flash files is that they require a separate application (that costs money) to create the file.

Based on ease of creation, fast download times, and the fact that the graphic needs to work only in Internet Explorer, the structured graphic is probably the best solution to this problem. If the original conditions had been slightly different, any of the other options might have proved to be better—a higher bandwidth might have allowed for the inclusion of video, and compatibility with Netscape Navigator would have weighted the decision more heavily in favor of Flash.

Some other considerations to keep in mind when planning media include:

• How many other media elements are on the page? Typically, the more media elements on a page (even if the elements are small) the more performance will degrade. This is not only because of bandwidth constraints but also because most media is fairly taxing on the rest of the computer.
• What creation tools are available? For example, to create a Flash file, you must have the Macromedia Flash application. To piece together a video sequence, you will probably need a video-editing tool like Adobe Premiere.
• How many colors does the page need? Users with low-end machines may be able to see only 256 colors at a time. In deference to such users, you might not want to include images that need, for example, many variations of one color. At the very least, it is a good idea to test your pages in 256-color mode (also known as 8-bit). On a PC running Windows 95, Windows 98, and Windows NT 4 or later, you can set your color depth in the Control Panel for Display. On most Macintosh machines, you can set your color depth in the Control Panel for Monitors.
• How much control do you need over each element? Each media type in Internet Explorer allows the content developer to control different properties. You should plan how much control you will need before deciding on the technology you want to use.