To raise your Web site up out of the plains of text into the mountainous wonderland of graphics and multimedia, you'll need to learn more than just HTML. This chapter provides an introduction to the essential tools and skills you'll need to take your
pages to new heights of visual and auditory splendor. It also explains the Microsoft Internet Explorer extensions to HTML that enable you to embed sound and video content on your Web pages as easily as you can embed still images.
Two forces are always at odds when you post graphics and multimedia on the Net. Your eyes and ears want everything to be as detailed and accurate as possible, but your clock and wallet want files to be as small as possible. Intricate, colorful graphics
mean big file sizes, which can take a long time to transfer even over a fast connection. Add smooth animation and high-quality sound, and file sizes get truly astronomical. As a result, quality usually has to take a back seat to file size, especially now
that most people on the Net are using inexpensive modems and not high-speed university trunk lines.
So how do you find the right balance? And how do you maximize the quality of your presentation while minimizing file size? To make these choices, you need to understand what your options are and how color depth and resolution work together to create a
subjective sense of quality. The next few paragraphs contain a concise summary of what you need to know about color and resolution. Quality and size issues for sound, animation, and interactive media are also discussed.
The vertical and horizontal resolutions are the height and width of the image, measured in pixels (the individual dots that make up a digital image). Color depth is the number of bits of information used to describe each pixel.
Each
bit can have two values, so two bits can have four unique values (2x2), four bits can have 16 unique values (2x2x2x2), and so on. For most images you put on the Net, a color look-up table or palette is included in the image file to specify which color
corresponds to each value.
If you use enough bits per pixel, however, you can describe the color in terms of its red, green, and blue color components, and you don't need a color look-up table. Most often, these true color images use 24 bits per pixel, which provides more colors
than the human eye can distinguish. Some graphics cards use only 15, 16, or 18 bits to display true color images, but the graphics files themselves usually include all 24 bits of color information even if you can't see them all on your graphics card.
All these factors together determine the overall size of the image file. Table 24.1 shows all the common color depths, resolutions, and the resulting theoretical size of the image, including the color look-up table. Before you dive into the long list
of
numbers in Table 24.1, you might want to look at Figures 24.1 through 24.7. Figures 24.1 through 24.4 show an image at one size, but with increasing color depth (here the images are of course approximated in gray—the differences would be even more
pronounced in full color). Figures 24.4 through 24.7 show a black-and-white image at increasing horizontal and vertical resolution.
Figure 24.1. An image using two colors.
Figure 24.2. The same image using 16 colors.
Figure 24.3. The same image using 256 colors.
Figure 24.4. A two-color image at a resolution of 160x120 pixels.
Figure 24.5. A two-color image at a resolution of 320x240 pixels.
Figure 24.6. A two-color image at a resolution of 640x480 pixels.
| Bits per pixel(number of colors) | |||||
| Resolution | 1(2) | 4(16) | 8(256) | 15(32,768) | 24(16,777,216) |
| 160x120 pixels | 3K | 10K | 20K | 35K | 58K |
| 320x200 pixels | 8K | 31K | 64K | 117K | 188K |
| 640x480 pixels | 37K | 150K | 300K | 563K | 900K |
| 800x600 pixels | 59K | 234K | 469K | 879K | 1,406K |
| 1024x768 pixels | 96K | 384K | 769K | 1,440K | 2,304K |
Most images will actually take much less space on your hard drive than Table 24.1 indicates because they are stored in a compressed format. How much an image can be compressed depends on the image. An image that is a truly random sea of static wouldn't
compress at all, and a solid-color image would compress to well under 1K no matter what its resolution. Generally, the GIF images most often found on the Net achieve somewhere around 4:1 compression (meaning that a file would typically take up a quarter
as
much space as is listed in Table 24.1).
Lossy JPEG compression, however, can squeeze images even smaller. They'll usually start showing noticeable degradation at compression ratios greater than 4:1, but true color photographic images will sometimes tolerate JPEG compression as tight as 10:1
without too much uglification.
You can control the JPEG compression ratio in many graphics programs, including Paint Shop Pro (included on the CD-ROM that accompanies this book). Figure 24.7 shows the JPEG Save As | Options dialog box. You can control the compression ratio for
saving
JPEG files by adjusting the compression level setting between 1 percent (low quality, small file size) and 99 percent (high quality, large file size).
Figures 24.8 through 24.11 compare the results of saving a graphics file at various JPEG compression quality settings (keep in mind that the differences are more obvious in color), and Table 24.2 indicates how these settings affect the file size. If
you
were surfing the Net, would you rather wait nearly half a minute to see this image in its full glory, or watch it pop onto your screen at 75 percent quality in less than six seconds? That's the kind of difference that makes JPEG a hard format to beat for
storing true color graphics on the Net. Unfortunately, images that are larger than this 320x200 example usually don't compress quite as efficiently.
Figure 24.8. A scanned photo saved as a JPEG file at 95 percent compression quality.
Figure 24.9. A scanned photo saved as a JPEG file at 75 percent compression quality.
Figure 24.10. A scanned photo saved as a JPEG file at 50 percent compression quality.
Figure 24.11. A scanned photo saved as a JPEG file at 25 percent compression quality.
| Color depth | Actual file format | Approximate file size | Approximate compression ratio | Transfer time |
| 24-bit | Uncompressed TGA | 190.5K | 1:1 | 95 seconds |
| 8-bit | Compressed GIF | 51.4K | 4:1 | 26 seconds |
| 24-bit | "Near perfect" JPEG | 54.3K | 4:1 | 27 seconds |
| 24-bit | 95 percent JPEG (Figure 24.8) | 32.5K | 6:1 | 16 seconds |
| 24-bit | 75 percent JPEG (Figure 24.9) | 11.3K | 17:1 | 6 seconds |
| 24-bit | 50 percent JPEG (Figure 24.10) | 7.3K | 26:1 | 4 seconds |
| 24-bit | 25 percent JPEG (Figure 24.11) | 4.6K | 40:1 | 2 seconds |
TIP
To estimate how long it will typically take for your images to download, you can assume that a standard 28.8 kilobit-per-second modem with a good connection to a Net site can pull about two kilobytes per second. Therefore, a lossless 1024x768 true-color image would take around 5 to 10 minutes to transfer, depending on its compression ratio. You probably aren't going to upload or download too many of those at a time, but a dedicated fan of your creations would probably tolerate the wait. Users with a high-speed (64Kbps or more) network connection would be even more likely to sit through the download, but they might still suffer through a significant wait, especially considering the delays induced by overburdened servers at many sites. Remember, though, that many people are still accessing the Net through 14.4Kbps or slower modems and with non-Netscape browsers that don't display text until after the images are completely loaded.
The sonic equivalent of graphics resolution is the sample rate, or how many times per second the sound wave changes. Almost all Internet sound files use a sampling rate of 8 Kilohertz (8,000 changes per second), which is the minimum that sounds
acceptable to most people. Some programs call this voice-quality or AM-radio quality. In situations in which sound quality is paramount and download time doesn't matter, you can use 11 Khz (radio-quality) or 22 Khz (CD-quality).
Just as you can control how many bits of information are used to describe the colors in a graphics file, you can choose between 8-bit or 16-bit sound files. For the Internet, you will always want to use 8-bit sounds to save space unless you are serving
up sound files on a high-speed, local network only.
You can also choose between several sound file formats and methods for compressing sound files. The most common on the Net are AU files using some variant of CCITT A-law or u-law encoding. Windows WAV files encoded with PCM are becoming very common as
well. Both AU and WAV files take up about the same amount of space for the same level of sound quality. A second of 8-bit, 8Khz sound generally weighs in at between 4 and 8KB.
For situations in which quality can be sacrificed for size, such as when you need to include long passages of speech, consider using RealAudio files. These files use a proprietary lossy compression algorithm to crunch sounds down to about a tenth of
their normal size. See Chapter 17, "Using Graphics, Sound, and Video," for more information on RealAudio.
If you choose to incorporate video, animations, or bandwidth-gobbling interactive media such as Shockwave "movies" into your Web pages, squeezing the most out of every byte becomes even more crucial.
On top of graphics resolution and sound sample rate, video and animation add the variable of frame rate (the number of images displayed per second). Sixty frames per second is the Holy Grail of digital video, and 30 frames per second is considered
professional quality. Unfortunately, even the most highly compressed video formats, such as VDOLive, currently max out at around 10 frames per second for tiny 160x120 video over a 28.8K phone line.
For better-quality AVI, QuickTime, or MPEG video, real-time playback through a modem is out of the question at any frame rate. The name of the game for these movies is guessing how much of an intolerable wait your audience is willing to tolerate. One
megabyte seems to be the current line dividing too much and too little; it's just about as hard to wait 10 to 20 minutes for a 1MB download as it is to create a 1MB, 10- or 20-second MPEG video with enough content to be interesting.
If you're lucky enough to have Macromedia Director, however, you can squeeze far more content into a 200K interactive movie than you could cram into an ordinary 1MB video. Careful use of Director's cast member (bitmaps that are stored once but can
appear multiple times in multiple colors), along with rendering tricks such as on-the-fly coloring of one-bit images with ink effects, can dramatically compress file sizes. Sound loops, interactive scripts, and Lingo programs can literally make very small
movies play indefinitely without repeating the exact same sequence. See Chapter 19, "Viewing Shockwave Sites" for more on Shockwave from the user's point of view.
A thorough discussion of the intricate art of Director design is far beyond the scope of this book, but you will find a number of tips for wringing the extra bytes out of your Shockwave movies in the ShockTips movie at the Macromedia Web site (http://www.macromedia.com/).
There are so many ways to produce images, sounds, and video sequences that this chapter can't even begin to explain them all. But just in case you're new to this kind of thing, this section offers a quick overview of the software and techniques that
might prove particularly well-suited for Netscape graphics. Graphics fall into three basic categories:
Each of these categories requires different tools and techniques, though the lines between the categories can get more than a little bit blurry when you use several types of tools to produce an image.
If you plan to incorporate photographic images or videos, you'll need some kind of scanner or capture board. You can get a decent hand-held color scanner for as little as $200, and cheap video capture cards run in the same price range. These low-cost
units should prove quite sufficient for the relatively low resolutions appropriate for the Internet today.
Before you digitize, or even before you shoot, remember that many details will probably be lost when the picture is converted to a Net-ready, low-resolution file. Does your subject still look as you intended if you blur your eyes when you look at it?
If
not, it probably won't survive the journey into cyberspace very well.
Of course, to properly prepare photographic images for online display, you need some photo retouching software. The excellent shareware programs Paint Shop Pro for Windows and NIH Image for the Mac are on the CD that accompanies this book. These
programs should handle almost any image correction and enhancement task you'll need for the Net, and Paint Shop Pro even includes the standard TWAIN interface for scanners so you can scan without leaving the program.
If you want to hand retouch videos or you find that you need more capabilities than Paint Shop Pro or NIH Image provides, there are many commercial photo and video editing programs, from the CorelPAINT module included free with the CorelDRAW! art
program to the ultimate photophile's dream, Adobe Photoshop. (I've tried most of these programs, and yes, Photoshop deserves its reputation as the most powerful but hardest to learn.)
The ultra-realistic images and special effects you've seen on TV and in the movies are often now produced on PCs and Macs with programs such as Autodesk 3D Studio and StrataStudio Pro. If you've been frightened away from the four-digit price tags of
these programs, you might be surprised to find out that you can produce 3-D models and images of the same (and sometimes better) quality with freeware and shareware programs. Free and inexpensive software is also available to generate mind-boggling
mathematical patterns called fractals and other eye-catching artwork that no human could imagine, let alone draw. The Hot Sites area on the Internet Explorer 3.0 Unleashed CD-ROM includes links to several sites where you can download the software
to
make your own art.
If you'd like to learn more about computer-generated art, Bill Allen's 3D Artist Magazine (mailto:ballen@3dartist.com, http://www.3dartist.com, voice: 505-982-3532, fax: 505-820-6929) is an excellent source of
information on 3-D modeling and rendering tips and software. I also publish a free newsletter about a variety of computer-generated graphics techniques and programs. To get on the mailing list, just ask me (mailto:dickoliver@netletter.com, voice:
802-888-5275, fax: 802-888-3009).
When it comes time to post your computer's creations on the Net, follow the same guidelines for resolution and color depth as you would for photographs. You should also consider contrast and composition when setting up "cameras" and
"lights" in 3-D computer-generated scenes. Because the scanning step is eliminated and lighting is easier to control, you do have a bit more flexibility with the 3-D models than with physical objects and creatures.
You can paint some very simple artwork from within Paint Shop Pro or another photo retouching program. A background that fades smoothly from red to blue is one example of art that is nearly impossible to do well by hand (unless you're an experienced
airbrush artist), but that the computer can do with a couple of mouse clicks.
CorelDRAW! is the world's best-selling drawing and painting package (and deserves to be because it probably includes the most complete and useful collection of tools). The main CorelDRAW! program doesn't let you control the color of each pixel in an
image. Instead, you work with higher-level objects like lines, circles, triangles, and letter shapes. This setup makes it easy to print the same artwork at different resolutions without loss of quality, and also makes changing a drawing simpler. Programs
like CorelDRAW! that work with mathematical entities like lines instead of the pixels of the image itself are called vector art or drawing programs. Adobe Illustrator and Micrographix Designer are two of the many other popular and
powerful drawing programs.
TIP
Because images produced with vector drawing programs tend to have neat edges and relatively large regions of identical color, they tend to compress very tightly, even when converted to bitmaps. A colorful vector art image on your home page will therefore usually load much faster than a photographic or photorealistic image the same size.
Because vector art programs aren't much good for editing photos or artwork generated by other software, they often come bundled with a bitmapped art or painting program that does handle the pixels of an image directly. Photoshop and Paint Shop Pro are
essentially painting programs, but because they are specifically designed for modifying images instead of creating them from scratch, they lack many of the tools of a "genuine" painting program like Fractal Design Painter. A program like Fractal
Design Painter (which has nothing directly to do with fractals, by the way) can simulate almost any traditional artistic tool or medium, from watercolors to charcoal pencils, with uncanny effectiveness.
You can also easily mix and match various degrees of automated and computer-generated techniques with the manual tools offered by drawing and painting software. Sometimes even the distinction between photography and created art gets a bit fuzzy.
You can't always ensure that the graphics on your Web pages look the way you intended them to look for every browser or even every Internet Explorer user. Nor can you be sure how long a user will have to wait for an image to download and appear.
Fortunately, the GIF and JPEG file standards give you a couple ways to increase the likelihood that readers see something like what you meant for them to see, and that they see it as quickly as possible.
The most reliable way to achieve the "as quickly as possible" part is to save images as interlaced GIFs. In a non-interlaced image file, the top line of pixels is stored first, and then the next line down, and then the next line after that,
and so on. In an interlaced file, only every other line is saved and then the missing lines are filled in at the end of the file. Internet Explorer displays interlaced GIFs as they are being read, so a rough draft of the image appears very quickly, and
then the details are filled in as the download finishes. This capability can have a dramatic psychological effect because it makes the images seem to appear much faster even though they take the same total amount of time to download.
Most graphics programs that can handle GIF files enable you to choose whether to save them interlaced or noninterlaced. In Paint Shop Pro, for example, you can select Save As, and then choose GIF - CompuServe from the List Files of Type drop-down list.
Choose Version 89a Interlaced from the File Sub-Format drop-down list (see Figure 24.12).
With version 3.0, Internet Explorer has added an even more impressive way to increase the apparent speed at which an image appears. A new variation on the JPEG format called progressive JPEG provides a preview of the image as it loads. This blurred
preview image is much smoother than the blocky preview you see with an interlaced GIF. Coupled with JPEG's capability to compress images much more tightly than GIF, this effect can make images seem to appear almost instantly.
As I write this chapter, few graphics programs can read and write progressive JPEGs. By the time you read this chapter, however, the latest versions of Paint Shop Pro and most other shareware graphics programs on the Internet will have progressive JPEG
support. Check Stroud's at http://cwsapps.fibr.net/ or the documentation of your favorite graphics program for the URL where you can download the latest enhancements.
NOTE
Microsoft Internet Explorer and Netscape Navigator are currently the only browsers that can view progressive JPEGs. Other browsers won't display any image at all if they encounter a progressive JPEG, so you might want to stick with interlaced GIFs and "normal" JPEG images if you want your pages to be viewable by the widest audience possible.
Paint Shop Pro also supports an even more useful GIF feature: transparency. Because different browsers use different background colors (and most, including Internet Explorer, enable users to select their favorite background colors), it can be difficult
to make non-rectangular graphics look good on a Web page. By choosing a color in your GIF image to be transparent, however, you can ensure that it will look its best on any color background. Figure 24.13 shows two versions of the same image: one with
transparency and one without.
Figure 24.13. With transparency, you can incorporate non-rectangular shapes into a page.
To turn the bottom image in Figure 24.13 into the top one, I loaded it into Paint Shop Pro, selected the Eyedropper tool, and right-clicked the color I wanted to make transparent. I then selected File | Save As, clicked Options, and selected the Set
the
Transparency Value to the Background Color option.
Notice that the white area in the center didn't become transparent, even though it was exactly the same color as the white background. That's because when I created the image, I purposefully filled that area with a different palette color. This
technique works because transparency uses the palette index number and not the physical color to decide what's transparent. (In case you're wondering what software I used to paint the face a different color, it was Paint Shop Pro. I selected Colors | Edit
Palette, double-clicked palette color 214, turned it white, and then used the Bucket Fill tool to fill the face with it.)
Background tiling can be combined with transparent images to add a great deal of flair to your pages. Be warned, however, that transparency and background tiling can slightly increase the time it takes for a page to download, though Internet Explorer
will display the page on a blank background first, and then redisplay it when the background is finished loading.
TIP
You can avoid unsightly "blips" by avoiding interlaced GIFs that are also transparent. The multiple passes sometimes leave little holes around the edges of the transparency area. Make all transparent GIFs non-interlaced if they will be overlaying a background image.
The graphics-savvy among us can pull off some jazzy stunts to make Web pages display in style. But remember that not all browsers play in the same key. If you use any of the advanced image stunts supported by Internet Explorer, users of other browsers
might not see (or hear) what you intended at all. It's always a good idea to at least include a warning that your page is best viewed with Internet Explorer and/or Netscape Navigator versions 2.0 or later and indicate which helper applications might be
needed to enjoy any multimedia content in non-standard formats.
Remember that many people will not see any of the graphics you put on your Web pages. Even those using graphics-capable browsers often surf with graphics downloading turned off to reduce download times over a slow modem connection. For general-audience
pages, you should always use the ALT= attribute to at least give non-graphical users some idea of what they're missing. (See Chapter 22, "Composing and Editing HTML Pages," for information about the IMG and ALT attributes.)
Wouldn't it be nice if you could just "snap together" three or four GIF images to make a simple animated graphic? And wouldn't it be great if people using older Web browsers automatically saw at least the first frame of your animation,
without
your having to do any extra coding or producing additional graphics files? And while we're wishing, how about an animation format that can save a cool animated icon in a 20KB or smaller file?
Believe it or not, these Utopian dreams have already become a reality. In fact, multiframe animation was built into the GIF file format way back in 1989. The compression is very efficient, and it's almost shamefully easy to make GIF animations. Every
user of Netscape Navigator 2.0 or 3.0 and Microsoft Internet Explorer 3.0 (which means the vast majority of Internet surfers) can see animated GIFs without any additional software or add-ons. You can include these animations in a Web page exactly as if
they were "ordinary" GIFs, with the <IMG> tag. Most browsers will support GIF animation in their next releases, but in the meantime users of browsers other than Navigator or Explorer will always just see the first image in the animation.
Ease of creation and use makes GIF animations a great choice for simple animated icons and any Web page graphics that could use a little motion to spice them up. In this chapter you'll learn how to create GIF animations and how to optimize them for the
fastest possible display.
The CD-ROM accompanying this book includes an evaluation copy of Alchemy Mindworks' GIF Construction Set, a nifty little utility designed especially for assembling multi-image GIFs.
NOTE
GIF Construction Set is what Steven William Rimmer (its author) calls "bookware." That is, if you continue to use the program after trying it out, he asks you to "register" it by buying his latest novel, The Order, from a bookstore and then entering some information from the book into the GIF Construction Set registration screen.
After you create an animation for a Web page with GIF Construction Set, I'm sure you'll agree that it's well worth the cost of a paperback novel, times ten. So go buy Steve's book—and while you're at it, why not take a break from the computer for a while and read it?
The first step in creating a GIF animation is to create a series of images to be displayed one after the other. You can use any graphics software you like to make the images. You don't even need to use software that supports GIF to make the images; GIF
Construction Set can import BMP, JPEG, PCX, TIFF, and almost any other graphics file format you throw at it.
The following numbered steps show you how to make a simple GIF animation. This animation will flip back and forth between two "LOOK" logo images, which you saw in the look.htm document from the Internet Explorer 3.0 Unleashed
CD-ROM (I created these images in Paint Shop Pro, which is also on the CD-ROM.)
I obviously can't illustrate the animation effect of flipping back and forth between two images with a printed figure in a book. But you can load the look.htm document on the CD-ROM if you'd like to see the action. The same procedure used for this
simple two-frame animation can be used to create as many frames as you choose.
When it comes to placing audio, video, and animation (as well as any other sort of data you might want to send to a browser) in your Web pages, these media are not that different at all. In fact, as far as standard HTML is concerned, the only
difference
between one kind of file and another is the corresponding media type, which is indicated by the file extension (the three or four letters following the dot at the end of the filename). Given this significant piece of information (and, of course,
the
data in the file itself), the browser will marshal its built-in viewers or helper apps to handle everything as seamlessly as possible.
The tag you use to place a file into your Web page will determine how (and if) the page responds when browsed. When you build a page, you should consider which browsers you intend on serving best, and whether or not you're going to stick to the
authorized, "official" HTML Spec (which is specifically designed to minimize incompatibilities and display errors among all known browsers).
In the following discussion, I demonstrate how to embed video and sound into your Web pages so that users of all major browsers can view your pages, and Internet Explorer users can enjoy the additional multimedia experience.
You are by now familiar with the function of the <IMG> tag, which is used to incorporate inline graphics (which are displayed directly "in" the page, as opposed to within the window of an external viewer). As of this writing, the
<IMG> tag as implemented by Netscape Navigator recognizes only GIF or JPG formats, but Microsoft Internet Explorer 3.0 enables you to include BMP images and—more significantly—AVI videos and three-dimensional VRML worlds.
Figure 24.18 shows an AVI video clip embedded in a Web page in Microsoft Internet Explorer 3.0. The lobster looks like an ordinary image when printed in this book, but if you open downeast.htm on the CD-ROM, you'll see that it's actually a short video.
Figure 24.18. The image of the lobster is actually an animated video clip.
The HTML code to include the video can be as simple as the following:
<IMG DYNSRC="lobstah.avi" WIDTH=160 HEIGHT=120>
The DYNSRC stands for dynamic source, and tells Explorer that this is a motion-video file instead of just a still SRC image.
If you include both SRC and DYNSRC attributes in an <IMG> tag, then older browsers that don't support DYNSRC will simply display the SRC image instead. This is a very painless way to ensure backward compatibility!
Two more new attributes can be used along with DYNSRC in an <IMG> tag, too. CONTROLS causes a set of controls to be displayed beneath the video clip. LOOP=INFINITE makes the video automatically repeat forever, and LOOP=n plays the video
n times and then stops (for example, LOOP=3 would play three times). Naturally, you can also use any of the standard IMG attributes, such as ALIGN, BORDER, and so on.
Of course, the real way to achieve a "click-and-download" effect is to make a link to it—simply place the filename in an Anchor tag with an HREF, as shown in this line:
<A HREF="/WINDOWS/MEDIA/CANYON.MID">Click Here to Download</A>
This way, of course, the sound file is played when the user clicks on the link, as soon as the file has finished downloading. This will work even in browsers that have no built-in MIDI player and must rely on a MIDI helper app. So to make the lobster
video in the DownEast Restaurant sample page available to users who don't have Internet Explorer 3.0, you could enclose the <IMG> tag with an ordinary A HREF link, and perhaps include the words "Click me!" or something similar in the SRC
image. The following is an example:
<A HREF="lobstah.avi"> <IMG DYNSRC="lobstah2.avi" SRC="lobstah.jpg" WIDTH=160 HEIGHT=120> </A>
Figure 24.19 shows the result of an Internet Explorer 2.0 user clicking on the lobstah.jpg image; a separate AVI window appears, and plays back the video. Users of other browsers would see whatever AVI viewer their software was configured to use as a
helper app, or they would be given the chance to save the AVI file to disk if no viewer was available.
Figure 24.19. This is exactly the same page as seen with Explorer 3.0 in Figure 24.18, viewed with Internet Explorer version 2.0.
Video files embedded with IMG DYNSRC can include soundtracks, but Microsoft Internet Explorer also lets you specify a background sound for a page like this:
<BGSOUND SRC="lobstah.wav">
The background sound might not synchronize exactly with video content on the page, but in situations in which that's OK BGSOUND can offer several advantages. Not only does the background sound usually start playing sooner than video, but you can
include
more than one video on the page, and use BGSOUND to provide a master soundtrack for all of them.
A particularly effective way to reduce the file sizes on your page is to use a short video with the LOOP attribute to repeat it several times (or continually) while a longer background sound plays. This was used in the downeast.htm example on the
CD-ROM
to reduce the total multimedia file size for the page from over 500KB (lobstah.avi) to less than 200KB (lobstah8.wav and lobstah2.avi), while keeping the same voice over and a similar video effect.
To save even more space, you can specify a MIDI music file as the BGSOUND SRC. Because MIDI files are usually at least ten times as compact as a WAV file of the same time duration, you can use MIDI to effectively serve quite lengthy
soundtracks—even to 14.4Kbps modem users.
This chapter has provided the basic background you need to produce images and multimedia and place them on your Web pages. Chapter 25, "Publishing with MS Internet Assistant," demonstrates the fastest way to put some text and graphics into
simple Web pages directly from your Microsoft Office applications.
