Multimedia is increasingly becoming an important part of content published on the Internet. When it's used properly, multimedia makes it easier and more interesting to navigate a Web site. Although most graphics can easily be created and added to a Web page, to optimize graphics for the Internet, there are a few more things that need to be accomplished. Also different types of graphics formats are suitable for various tasks. Knowing when to use which format can make your Web site easier to navigate by offering your Web surfers graphics that are optimized for the Internet. Before discussing the different graphics formats and their suitability for different tasks, it's time to examine why you should go to all the trouble to add multimedia to a Web site and to optimize graphics for the Internet.
Although information is a Web site's most valuable asset, when it's used properly, multimedia can enhance the information viewing experience. Multimedia complements the contents of a Web site by making it more attractive and easier to navigate. Although some prefer not to incorporate multimedia to a Web site for fear of distracting users, by not using multimedia these people fail to use the World Wide Web to its fullest potential. Although too much of any good thing is usually not very good, adding a few images and other multimedia objects to a Web site makes it easier and more enjoyable to browse.
Multimedia often acts almost like eye candy. For example, when discussing the final results of a technical experiment, the reader is probably tired of reading a few pages of information. When presenting the final results to the reader, relying on a plain text chart might not make a very big impact. However, if the plain text data is converted to a few graphical charts that are exported as GIF files, the impact will be far greater.
In addition to providing a more effective way of distributing information, multimedia also helps Web surfers locate information they need faster. For instance, when a user is presented with a menu consisting of a few items, in order to find an interesting topic the user often has to read all the items in the menu. On the other hand, if graphic icons are added to the menu, rather than reading lines of text, the user will be able to quickly single out interesting topics by scanning the graphics. This not only saves time but also makes the whole information retrieval experience more interesting.
Table 11.1 lists the multimedia formats commonly used on the Internet
and a brief description of each format.
Common/Complete Name | Description | |
Audio Video Interleaved | A motion video format commonly used under Windows. | |
Windows Bitmap |
A graphics format native to Windows. BMP files are often quite large and are not suitable for low bandwidth Internet use. | |
GIF | GIF stands for Graphics Interchange Format. The GIF format was originally developed by CompuServe. It is now one of the most popular graphics formats on the Internet. | |
JPEG | A graphics format optimized for compressing "natural images." JPEG should not be used when sharp borders or text are part of the image. | |
QuickTime | A motion video format commonly used in Apple Macintosh computers. QuickTime was developed by Apple. A Windows version of the QuickTime viewer is available for Windows. | |
MPEG | A motion video format that exploits various characteristics of the JPEG format and similarities between various frames to compress video files. | |
Tagged Image File Format | A graphics format used to retain very detailed information about a graphic. TIF files are usually very large in size and are not suitable for general Internet use. Unless you have art majors looking at classic artwork with subtle changes in color and brightness, you should not use this format for Internet graphics. | |
Microsoft Waveform | An audio file format commonly used under Windows. By reducing the frequency and sampling rate of WAV files, file sizes can be reduced by sacrificing sound quality, and vice versa. | |
u-law file format | An audio format commonly used on the Internet. Most Java applets use this audio format. | |
X Window Bitmap | A commonly used graphics format in the X Window environment. |
When adding multimedia to a Web site, it's very important to use platform-independent multimedia. Sometimes it's frustrating for users to find multimedia files at a Web site but have no way of viewing them. You should provide URLs to download viewers for various multimedia files at your Web site, especially if the Web site will be visited by many not-so-computer-literate users.
Multimedia is significantly more bandwidth-intensive than plain text. Therefore, it's important not only to stay within the bandwidth of your Internet link, but also to be considerate toward users who might be connected to the Internet via a POTS Internet link.
You should be particularly careful about bandwidth restrictions when adding multimedia to your Web site. Although you might have a relatively fast connection to the Internet, not everyone has that luxury. If your target audience includes large corporations, don't think that all your users will automatically have high-speed Internet links to their desktops. A company may have just gotten connected to the Internet, and its employees may be using only a 56 KB leased frame relay connection to the Internet. Such an Internet link can be painfully slow when several users use it to browse the Web.
It's undesirable to have large, bulky graphics that might take as much as a few minutes to load over a slow modem link to the Internet. Such graphics waste Internet bandwidth and might actually discourage a user from visiting your Web site. When adding graphics and multimedia to a Web site, take the time to experiment with various graphics formats and optimize them for the Internet. You're shown ways of judiciously using different graphics formats and optimizing them for the Internet shortly.
A large number of graphics file creation tools are available for Windows NT. The following sections list some of my favorite graphics creation applications. Although some applications are shareware, some are commercial applications. If you intend to create high-impact graphics, I recommend that you look into purchasing a powerful graphics file creation tool. Various graphics applications listed next have many useful features. Not all of these features are comprehensively covered in this chapter. Instead, you're provided with a brief overview of the application and are referred to a URL for more information.
LView Pro is an all-purpose graphics manipulation tool. It supports a wide variety of graphics formats and is ideal for converting graphics from one format to another. In addition to this, LView has provisions for applying special effects to graphics. Refer to Figure 11.1 for an example of what an image loaded in LView Pro looks like. As shown in Figure 11.1, you can apply special effects to an image by using its Retouch menu.
Figure 11.1: LView Pro is an all-purpose graphics file manipulation utility.
URL |
You can download the latest version of LView Pro from http://world.std.com/~mmedia/lviewp.html |
Paint Shop Pro is another useful general purpose Windows graphics creation utility. Although it's not a particularly powerful tool for applying advanced graphics special effects, Paint Shop Pro is sufficient for most tasks. A major advantage of using Paint Shop Pro over other utilities is its capability to handle more than one image at a time. As shown in Figure 11.2, Paint Shop Pro supports an MDI (Multiple Document Interface) user interface. For this reason, it's possible to work with more than one image at a time. This is sometimes a major advantage when working with graphics at a Web site. The tool bar to the left side of Figure 11.2 is also very handy when applying special effects to images.
Figure 11.2: Paint Shop Pro is a powerful image-viewing, editing, and converting application.
URL |
You can download the latest version of Paint Shop Pro from http://www.jasc.com/psp.html |
Once you begin publishing content on the Internet, you'll need a powerful image-viewing and editing tool capable of performing advanced graphics manipulation tasks such as graduated transparency layers and anti-aliasing, and various text manipulation tasks such as fitting text to a path. The shareware tools mentioned earlier are not capable of handling such advanced graphics manipulation tasks. If you intend to create high-impact graphics for your Web site, CorelXARA is a very powerful application that will meet virtually all your needs. Refer to Figure 11.3 for an example of a graphic loaded to CorelXARA.
Figure 11.3: You can apply many powerful special effects to a graphic by using CorelXARA.
Another useful CorelXARA feature is its clipart and fill catalog shown in Figure 11.4. You can use this tool to catalog all your graphics files. When designing a graphic, you can then select various graphics from this catalog, simply drag them from the catalog window, place them on the workspace, and resize them to meet your needs.
Figure 11.4: The clipart and fill catalog is a very useful CorelIXARA tool.
MetalWorks is a very handy application for creating and optimizing
graphics for the Internet. Although MetalWorks is not as feature
rich as other applications discussed earlier, it has many powerful
features for creating graphics for Web sites. Listed next are
a few tasks for which you can use MetalWorks.
URL |
You can obtain additional information about MetalWorks from http://www.sq.com/products/mtlworks/mtl-home.htm |
It's easy to add borders to images by using MetalWorks. In order to add a border to an image, first load it into MetalWorks, as shown in Figure 11.5.
After loading the file, choose Effects | Border to add a border to it. You are then presented with the Border dialog box, shown in Figure 11.6. This dialog box is used to specify various settings for the image's border. First, select the pixel width of the border by using the Width scroll bar. It's recommended that you select a setting of around 6 pixels. A large button frame can be distracting and needlessly increases the file size, making it take longer to transmit via the Internet. Then, by using the scroll-down list, select the color of the frame and whether you want the frame to be raised, inverted, or basic.
Figure 11.6: You can adjust border settings by using the Border dialog box.
Before clicking on OK, you can view the setting you selected by using the View button. If you don't like the selection you made, make another selection and click on the View button. After you're satisfied with the settings of the border, click OK. MetalWorks then creates a border around your graphic, as shown in Figure 11.7.
Figure 11.7: Graphic after a border is applied to it.
Note |
Adding borders to photographic images saved in the JPEG format is not recommended. JPEG compression works best when the image being compressed does not have any sharp borders or lines. Although adding a border to a JPEG image might look nice, it takes away any image compression you gain by using the JPEG format. As a rule of thumb, add borders only to images stored in the GIF format. |
You can also use MetalWorks to emboss graphics. Embossing gives graphics a special look by making them appear as if they're carved on a stonelike object. After loading a graphic to MetalWorks, as shown in Figure 11.7, you can emboss it by selecting Effects |Emboss from the main menu. You then see the Emboss dialog box, as shown in Figure 11.8.
Specify the light angle in degrees used to emboss the graphic by using the scroll bar provided in this dialog box. After you're happy with a value, click on View to preview your selection. If you're content with your choice, click on OK to apply the setting you selected, and the image will be embossed, as shown in Figure 11.9.
Figure 11.9: The graphic shown in Figure 11.7, embossed by MetalWorks.
In addition to embossing and adding borders, you can also use MetalWorks to make the backgrounds of GIF files transparent.
MetalWorks also makes it easy to optimize graphics for the Internet. By using MetalWorks to reduce the number of colors, you can reduce file sizes, making it easier to transmit them via the Internet. All these features, along with the capability to create imagemaps, makes MetalWorks a very handy utility that you can use to enhance and optimize graphics for the Web.
Out of all the graphics formats used on the Internet, GIF (Graphics Interchange Format) is perhaps the most widely used graphics format. It's so famous for several reasons. Unlike JPEG files, GIF files are not optimized for storing images resembling natural photographs. GIF is an all- purpose graphics format that can be used to store various graphics and images. The GIF format should be used to store graphics files that do not resemble natural photographs.
A major advantage of using the GIF format is its capability to allow a certain color to be transparent. For example, when adding a GIF file graphic into a Web page, if you make its background transparent, you can give the impression that it's floating in the background. You are shown how to do this in the Transparent GIF Files section.
GIF files also support interlacing. Interlacing is the capability to save a GIF file so that it becomes visible in bands. The banding effect makes the GIF file appear out of focus at first, and as more information about the graphic is retrieved, the image appears more focused. After you're shown how to make the background of GIF files transparent, you're shown how to interlace GIF files in the Interlacing GIF Files section. Various advantages and drawbacks of interlacing files are also discussed shortly.
Unfortunately, GIF files have a few limitations. Although these limitations are not applicable for some tasks, they make GIF files unsuitable for others. GIF files are limited to only 256 colors. This may cause color shifting and other undesired side effects.
You can give your Web site a professional touch by making the
backgrounds of GIF files transparent. When someone looks at a
transparent GIF file with a browser, the graphic's background
becomes the background color of the browser. This gives the impression
that the graphic is floating in the background, which adds
a sophisticated touch to the graphic.
Caution |
Making the background color of a photograph transparent can adversely affect the rest of the photograph. Photographs saved in the GIF format are not suitable for making a certain background color invisible unless the background color doesn't appear anywhere else in the photograph. Photographs are usually very rich in colors, and a GIF file can have only 256 colors. Because only 256 colors are used, it's a good bet that the background color is used somewhere else in the photograph. Consequently, if you make that color "invisible," it's going to make the photograph look bad because parts of it will also be invisible. If this happened in a photograph of a person, it could make him or her look like an alien! However, if a GIF file's background color is distinctly different from other colors in the graphic, you will have better luck making its background transparent. |
By using Paint Shop Pro, it's very easy to make the background of a GIF file transparent. Before doing this, you need to determine the index color of the background by loading the graphic to Paint Shop Pro, as shown in Figure 11.10.
After loading the graphic, select the eyedropper tool. The mouse pointer turns into an eyedropper when it's moved over the graphic. At the same time, if you look at the bottom status bar next to the image's resolution and color depth, a number of digits and characters are shown. These digits and characters are in the following format:
(X-coordinate, Y-coordinate) (I:IndexColor, R:RedValue, G:GreenValue, B:BlueValue)
Note |
The index color is shown only if the image loaded to Paint Shop Pro is a GIF file. If it's not, save it as a GIF file before proceeding further. |
The only number you need to pay attention to is the IndexColor value. When you move the mouse over the part of the image you want to be made transparent, make a note of its index color value. You'll need this information shortly. For the purpose of this example, the index color of the white background is 255. This graphic is included on the CD-ROM. If you wish, you can examine it yourself. After making a note of the index value, choose File | Save As to bring up the Save As dialog box shown in Figure 11.11. From the List Files of Type pull-down list, select GIF CompuServe. Next, select GIF 89A - Non Interlaced as the File Sub-Format. Then select a valid directory and type in a filename.
Figure 11.11: Saving a graphic as a GIF file.
After typing in a filename and selecting a valid directory, click the Options button. This brings up the GIF Transparency Options dialog box shown in Figure 11.12. You can use this dialog box to specify the index color of the image's background color that should be made transparent. Because 255 is the index color of the background, click Set the Transparency Value to type 255 and click OK. Use a new filename when saving the graphic by using the Save As dialog box in Figure 11.11. This way, if something should go wrong in the conversion process, you won't lose the original file. Then, click OK in the Save As dialog box to save the graphic with its background color set to transparent.
Figure 11.12: The background color of the graphic is made transparent by specifying its index value.
The graphic before its background was made transparent appears in Figure 11.13. As you can see, its white background stands out.
Figure 11.13: Original graphic loaded to Netscape before its white background was made transparent.
As you can see in Figure 11.14, when the white background of the graphic is made transparent, it no longer stands out against the background. If you'd like to see these two figures in color, refer to \Chapter-11\Transparent GIF Files\Before.html and \Chapter-11\Transparent GIF Files\After.html on the CD-ROM that comes with this book.
Figure 11.14: Graphic loaded to Netscape after its white background is made transparent.
If you have photographs at your Web site stored in the GIF format, it's a good idea to interlace them. What is interlacing? You may have noticed how some graphics on Web sites appear in bands. First, the graphic will look out of focus, and then get clearer and more focused as more data about the graphic is sent to the Web browser. Adding this effect to a GIF file is called interlacing.
Interlacing photographs at your Web site allows someone who's
not interested in the entire picture to go to another page rather
than wait for the whole picture to load. You can use the interlace
feature only on graphics stored in the GIF format. Although a
similar feature is available for JPEG files (Progressive JPEG),
it's not widely supported or backward-compatible.
Performance |
Interlaced GIF files are more CPU-intensive than noninterlaced GIF files, so be careful when using interlaced GIF files. Even though interlacing makes your graphics look neat, interlaced GIF files are larger than noninterlaced GIF files and generally take longer to display, especially if the client's computer has a relatively slow processor or a poor video card. Therefore, don't get carried away with interlacing and interlace all the GIF files at your Web site! Interlacing is a useful tool, but you should use it for the right job. Generally, interlacing should be used when displaying photographs because you can guess what the final photograph will look like from an early rendering of an interlaced GIF file. The same is not true for GIF files that contain text. |
You can interlace a GIF file very easily by using Paint Shop Pro. In order to interlace a GIF file, first load it to Paint Shop Pro as shown in Figure 11.15. You can use any file format compatible with Paint Shop Pro to create an Interlaced GIF file.
Figure 11.15:Original graphic loaded to Paint Shop Pro.
After loading the file, choose File | Save As. When the Save As dialog box appears, as shown in Figure 11.16, select a directory and type in a filename. Next, select GIF - CompuServe as the List Files of Type and Version 89a - Interlaced as the File Sub-Format.
Figure 11.16: Saving a graphic as an interlaced GIF file.
Note |
If the file does not contain any transparency information, you may save the file as Version 87a - Interlaced. |
You can use animation to give GIF files a certain flair. Netscape Navigator supports animated GIF files since Netscape 2.0 beta 05. An animated GIF file can be thought of as a collection of GIF files separated by each other with a time delay. Although at the time of this writing only a handful of Web browsers supported animated GIF files, this is most likely to change by the time you read this book. Also, Microsoft Internet Explorer 3.0 supports animated GIF files.
Before Netscape and Microsoft made an agreement with America Online
(AOL), around five million people were accessing the World Wide
Web by using a technologically challenged Web browser that was
not even sure how to parse a table. By the time you read this,
this situation will have changed; Internet Explorer will suddenly
become the default Web browser for around five million users.
Because in the long run Internet Explorer and Netscape are going
to be two of the most widely used Web browsers, you can add some
flair to your Web site by using animated GIF files.
URL |
You can download many free animated GIF files from http://www.teleport.com/~cooler/MMMM/index.html |
First, some good news. Animated GIF files are backward-compatible with Web browsers that support only regular GIF files. However, only the first frame of the animated GIF file will be visible to someone looking at it using a Web browser that does not support animated GIF files. When creating animated GIF files, you should keep this in mind. For example, you might want to create an animated GIF file with four frames. These four frames can each have a word that makes up a complete sentence. For example, "Click here for help" will have the following four frames:
Click
Here
For
Help
Although it makes sense to start this animating with "Click" because it's the first word of the sentence, this is not a very good idea. What if someone browses your Web site with a browser that does not support animated GIF files? They will then just see an icon that says "Click." But click what and why? Because Web browsers that do not support animated GIF files show only the first frame, seeing an icon that says "Click" can be somewhat confusing to some users. To remedy this problem, it's more desirable to start the animation in the following order:
Help
Click
Here
For
After making the suggested change in the animation sequence, a user browsing a Web site with a technologically challenged Web browser will see an icon that reads "Help" rather than "Click" (Help is a lot less ambiguous than Click). At the same time, after a few iterations of the animation sequence, those who use an advanced Web browser will figure out what the animation is about. As you can see, with a little effort, you can create animated GIF files so that they are completely backward-compatible with earlier Web browsers.
When using a new multimedia format, you should be aware of some of its side effects. The current implementation of animated GIF files (at least on the Netscape browser) is not very efficient. Although this does not make a big difference for a relatively small animated GIF file, the same is not true for large animated GIF files. In Figure 11.17, you see an animated GIF file that's found in one of Netscape's Web pages. Although you can't notice this from the figure, the wheels shown in the image are animated, and they actually turn. This is a rather elaborate GIF file and looks very impressive.
Figure 11.17: An animated GIF file found in one of Netscape's Web pages.
However, the animated GIF file shown in Figure 11.17 is rather CPU-intensive. The animation consumes approximately 70 percent of the CPU resources on a 90 MHz Pentium computer. As you can see in the CPU utilization chart generated by QuickSlice in Figure 11.18, the System Process barely has around 25 percent of CPU resources free when the animation is running.
Figure 11.18: CPU utilization of various applications when the page in Figure 11.17 is loaded.
You should take into account CPU utilization issues related to animated GIF files when creating and adding them to your Web site. Make an effort to keep animated GIF files as small as possible. As a rule of thumb, try to keep them smaller than 100 ¥ 100 pixels. Also, avoid having more than one animated GIF file in one page unless they are small animations (smaller than 50 ¥ 50 pixels). What's shown by QuickSlice is merely a snapshot of CPU utilization. This is not a very accurate representation of CPU utilization over a certain time period. What's shown in Figures 11.19 and 11.20 are Performance Monitor CPU utilization charts before and after loading Netscape's Web page. As you can see in Figure 11.20, after Netscape's page is loaded, CPU utilization is up by an average of about 70 percent.
You can create animated GIF files easily by using GIF Construction Set for Windows. For the purpose of this example, you are shown how to create an animated bullet icon. Unlike regular bullet icons, the animated bullet icon consists of ten colors, and every three seconds the bullet changes its color. You are shown how to create this animation later in this section. Listed next are the steps you need to take in order to create a GIF animation:
URL |
GIF Construction Set for Windows is a utility that you can use to create animated GIF files. This utility is bookware; you can register the program by purchasing a certain book and by answering a question. You can download GIF Construction Set for Windows from http://www.mindworkshop.com/alchemy/gifcon.html |
Before creating the animation with GIF Construction Set for Windows, you have to create ten multicolored bullets. These bullets are simply multicolored circles. You can use a number of graphics utility programs to create the ten files needed for the animation. The ten graphics used in this example were created with CorelXARA, as shown in Figure 11.21. If you wish to follow along, these graphics are on the CD-ROM that accompanies this book (\Chapter-11\GIF Animations\RoundBullets).
After creating the graphics, as shown in Figure 11.22, they need to be exported as GIF files. Use descriptive names when exporting several graphics that will become part of an animation. This will make it easier for you to determine which file is which when creating the animation.
When saving various graphics that are going to be part of an animation, you should pay attention to the dimensions of the graphics because you'll need this information later. By default, the GIF animation program allocates an area of 640 ¥ 480 for the GIF animation. You should typically change this value to the largest graphic that's part of the animation. Usually, when a graphic is exported, you are shown information about the graphics, such as dimensions, in a dialog box similar to the one shown in Figure 11.23.
After saving the graphics needed for the animation, invoke GIF Construction Set for Windows to create the animation. When GIF Construction Set for Windows is first invoked, it looks like Figure 11.24. On the left side, you see a listing of directories. Use this directory listing to select the location of your animated GIF file. Then choose File | New to begin creating an animated GIF file.
At this point, you will see a header at the top with a dimension of 640 ¥ 480. This value should be changed to the dimensions of the largest graphic that's part of the animation. In order to change the dimension of the header, select it and press the Edit button. You're then presented with an Edit Header dialog box, as shown in Figure 11.25.
Figure 11.25: The Edit Header dialog box is used to specify the dimensions of the animation.
Use the Edit Header dialog box to specify the width and height of the animation. Screen width corresponds with the width of the largest graphic of the animation, and screen depth corresponds with the height of the largest graphic. After setting these values, click OK to continue. The animation can now be created by adding various objects such as controls, images, loops, comments, and plain text. In order for the animation to iterate for a while, a loop control has to be added. To do this, click the Insert button, and you'll see a button bar identical to the one in Figure 11.26. In order to add a loop, click the Loop button in the dialog box shown in Figure 11.26.
Figure 11.26: You can add different objects to an animation.
With the Insert Object dialog box, you can add a number of objects to an animation. The following lists each object you can insert and a description of each:
Control: Define time delays for various animation sequences.
Image: Used to specify images that are part of an animation.
Loop: Used to specify the number of times the animation should iterate. Note that you can add only one loop block to an animation. The loop block contains information about the number of iterations of the animation.
Comment: Add comments to an animation. Use this to add a copyright notice to the animation.
Plain Text: Used to insert text blocks to animation.
After clicking the Loop button, the Edit Loop Block dialog box appears, as shown in Figure 11.27. Use this dialog box to type in the number of times the animation should iterate. After typing in a number, click OK to continue.
Figure 11.27: The Edit Loop Block dialog box.
After inserting the loop block, various images that are part of the animation have to be inserted. This can be done in pairs. Each image being inserted has two objects: a control object and an image object. The control object holds the time delay for the animation sequence, while the image object holds the image that will be displayed after the time delay specified in the control object. Now you can insert a control object and an image object.
By clicking the Insert button in Figure 11.24, first insert a control object and then insert an image object. When adding an image object, you need to specify the image that will be added by using a dialog box similar to the one shown in Figure 11.28. After selecting a file using this dialog box, press OK to continue.
Figure 11.28: Use the Open file dialog box to select images for an animation.
You then need to select a palette for the new image using the dialog box in Figure 11.29. Listed next are descriptions of various choices you can make at this point.
Figure 11.29: After selecting an image for the animation, a color palette has to be selected for it.
Use a local palette for this image: Use this format to make sure no color shifts or dithering effects are introduced into the image. Dithering is the process of blending two or more colors to produce a different color. However, this is not a very suitable format for computers with video cards that support only 256 colors. When this setting is used with such a video card, and another image is displayed on top of the previous image, it may cause undesired side effects.
Use a local gray palette for this image: Unless the image is already grayscale, this format is not recommended because it converts the image into grayscale.
Remap this image to the global palette: This causes all local colors of the image to be remapped by the closest matching colors of the global palette. Because it adversely affects color-sensitive images, this setting is not recommended for photographs.
Dither this image to the global palette: This setting is more suitable for photographic images.
Use this image as the global palette: If no other image blocks exist, you can use this option to import the global palette of the image being added.
Use it as is: This option is not recommended unless you like taking chances with the quality of your animated GIF files. When this option is used, if colors required by the image are not available in the global palate, it can make your graphics look very bad due to color substitutions and approximations.
Tip |
When adding images to an animated GIF file, use the 15-bit quantize (which limits the possible values to a discrete set of values) to produce better results. However, this option is more CPU-intensive, and you may have to wait longer. |
After adding the image, select the control that was added earlier and click the Edit button. You are then presented with the Edit Control Block dialog box, as shown in Figure 11.30.
Figure 11.30: The Edit Control Block dialog box.
You can use this dialog box to specify a transparent color, animation sequence delay, and what the image will be replaced with after it is displayed. All ten graphics files used in this example have a white background. The final animation will look much nicer if the white background is made transparent so only the circular bullet is visible. This can be done by clicking the Transparent color checkbox and by clicking the wide box next to it. As shown in Figure 11.31, you will then see a list of colors. From this list, select the color you want to be made transparent.
Figure 11.31: Transparent color selection dialog box.
Note |
At this point, if you don't see any other colors but black, this is because you probably selected the black bullet. Simply add another control and an image, and the color box will look similar to Figure 11.31. |
Then enter a number for the delay period using the Edit Control Block dialog box. Note that this value is specified in 1/100 seconds. In order to have a three-second delay, enter 300 in the space provided for Delay in Figure 11.30. Then select how you would like this image to be replaced after the delay period. The Edit Control Block dialog box will now look similar to the one shown in Figure 11.30. Click OK to continue and repeat it for all other images. The GIF Construction Set for Windows window should now look similar to Figure 11.32.
At this point, you might want to add a comment to the animation or insert a copyright notice to it. You do this by clicking Insert and Comment. After a comment block is added, double-click it to edit it. You can then add a comment to the animation you just created, as shown in Figure 11.33.
Figure 11.33: You can use the Edit Comment dialog box to add a comment to a GIF animation.
The animated GIF file is now created and can be used as a regular GIF file. When it's viewed with either a viewer or Web browser that does not support animated GIF files, only the first frame will be visible. However, when it's viewed with a graphics viewer or Web browser that supports animated GIF files, all ten frames of the animation will be visible, one after the other in three-second intervals. As shown in Figure 11.34, the animated bullet created in this example can be added to a Web page as a regular inline GIF image. The Web page shown in Figure 11.34 can be found on this book's CD-ROM under the directory \Chapter-11\GIF-Animations\RoundBullets\Animate.
JPEG (pronounced jay-peg) stands for Joint Photographic
Experts Group, the original name of the committee that wrote
the standard. Next to GIF, JPEG is the second most widely used
still-image format on the Internet. Unlike GIF, JPEG is not an
all-purpose graphics format. JPEG exploits a certain limitation
of the way we see things to compress photographic images. Humans
are more sensitive to brightness than color. You will learn more
about the JPEG format shortly.
URL |
Visit the following URL for more information about the JPEG format: http://www.cis.ohio-state.edu/hypertext/faq/usenet/jpeg-faq/ |
JPEG works well on photographs, naturalistic artwork, and similar material. When displaying photographs at your Web site, you should convert your pictures to JPEG format, which is a standardized image compression mechanism. JPEG can be used to compress color or grayscale images, and it works best when the image being converted to JPEG has "natural colors" (like those found in photographs of humans, trees, sunsets, forests, lakes, and beaches).
Photographs saved in the JPEG format are often much smaller than those saved in the GIF format. Because you will typically gain a 4:1 compression ratio with JPEG, as opposed to GIF, your images will be much smaller as long as they resemble photographs with natural colors. Having small images is a great advantage when pictures have to be transmitted over the Internet. Web surfers with slow Internet links will particularly appreciate the small file sizes.
By using JPEG, your graphics can be in 24-bit color instead of the 8-bit color used in the GIF format, which supports only 256 colors. On the other hand, JPEG supports up to 16.7 million colors.
You should never convert a cartoon or line art image to JPEG format. The resulting image will often be much bigger than the original! The same is true for images containing letters because JPEG has a hard time compressing graphics files that have sharp edges. JPEG is a poor choice for any graphic containing letters, cartoons, sharp edges, or line drawings.
Progressive JPEG files are very similar to interlaced GIF files; however, they are not backward- compatible. Unless you're certain that a very large percentage of your Web surfers use a browser that can handle progressive JPEG files, it's recommended that you use this format sparsely.
There are a number of benefits of using progressive JPEG files. Progressive JPEG files load faster than regular JPEG files. A demonstration of this can be found at the Netscape Web site, as shown in Figure 11.35.
URL |
You can find a Progressive JPEG demonstration at Netscape's Web site at the following URL: http://www.netscape.com/eng/mozilla/2.0/relnotes/demo/pjpegdemo.html |
Because some browsers don't support progressive JPEG files, when you add them to your Web site, be sure to create a link to a regular JPEG file in case a technologically challenged user visits your Web site. At the time of this writing, the following four Web browsers are the only ones I am aware of that support progressive JPEG:
URL |
Visit the following URL for more information about the progressive JPEG image compression format: http://www.cis.ohio-state.edu/hypertext/faq/usenet/jpeg-faq/part1/ |
Progressive GIF files can be created easily by using a graphics utility called LView Pro. Refer to the earlier section on Graphics File Creation Tools for the URL of LView Pro. In order to create a Progressive JPEG file, first load the image into LView Pro. Then choose File | Properties. This shows you the LView Pro Properties dialog box. Locate the JPEG (Normal) tab in this dialog box and click it. You are presented with a tabbed dialog box similar to the one in Figure 11.36. To save all JPEG images as Progressive JPEG images, simply locate the Compression settings section and click the Progressive compression checkbox. From now on, all JPEG files that you save will be saved as Progressive JPEG files.
Figure 11.36: LView Pro can be configured to save images as Progressive JPEG files.
Although frames might look nice, you should not add frames to JPEG files. Whatever file size reduction you gain by converting an image to JPEG will be lost when a frame is added to it. For example, Figure 11.37 contains a JPEG image without a frame. (This image is approximately 18 KB, as you see later in Figure 11.39.)
Figure 11.37: Original JPEG graphics file without a frame.
Adding a frame to the graphic can make the image in Figure 11.37 almost twice as large. The image shown in Figure 11.38 is a copy of the image shown in Figure 11.37; the only difference is a frame has been added to it. As you can see in the right side of Figure 11.39, adding a frame to the JPEG file in Figure 11.37 made it almost twice as large by adding an extra 17 KB to the file. For this reason, you should be very careful when adding frames to JPEG files because they get in the way of JPEG compression.
Figure 11.38: JPEG graphics file with a frame.
Figure 11.39: The JPEG file with a frame is almost twice as large as the JPEG file without a frame.
You might wonder why you should go to all this trouble to optimize your graphics by reducing graphics file sizes by just a few kilobytes. Although the reduction of each file might not be that much, the kilobytes add up when you have more than one graphic on a page and more than one person accessing your Web site at the same time. Most Web surfers are connected to the Internet by relatively slow POTS lines to the Internet.
As mentioned, graphics saved in GIF format can have up to 256 colors. However, unless you have a photograph saved in GIF format, you probably aren't using all 256 colors. Chances are you can use only a fraction of them and still have your graphic look remarkably similar to the original file. By reducing the number of colors used in a graphic, you can actually reduce the file size by as much as 40 percent, depending on the graphic. To reduce the number of colors, experiment with various amounts of colors until your graphic looks almost identical to the original graphic.
It's not desirable to add large graphics to your Web pages without warning. This can be very frustrating for a user accessing your Web site via a relatively slow modem link to the Internet. Rather than adding a large graphic or image file to a Web page, it's more desirable to create a small thumbnail representation of the graphic. You can then let users know that if they click the thumbnail, the user will see the graphic or image in full size. It will also be helpful to let the user know the file size.
Reducing file sizes of graphics is key to making a Web site easier to navigate, especially for those accessing it through relatively slow POTS links to the Internet. Listed in the next sections are a few tips that will aid you in the process of reducing graphics file sizes.
Most graphic utilities have an option to blur images. When reducing the size of a graphic, especially a graphic containing text and other fine detail, it's recommended that you make the image blur before reducing its size.
The reason for this is very simple. When a graphic is reduced in size, small details such as lines and text tend to appear jagged because they are relatively small. On the other hand, when an image is blurred, such details become spread out. When an image is then reduced in size, jagged lines are not visible because fine lines get spread out when the image is blurred.
Due to its intrinsic nature, text is very sensitive to graphics file size reductions and changes in color. For this reason, you should always add text to graphics when you're done adding other special effects.
Make sure the images on your Web site are as small as possible. If you have large graphics files at your Web site, users with slow modem links might get frustrated and leave your Web site. After all the work you've put into setting up your Web site, you don't want that to happen. If you need to have large graphics files, you should let the user decide if he or she wants to see them. This can be done by showing a thumbnail representation of the graphics file and allowing the user to click the image if he or she is interested in seeing the image magnified. Keeping your graphics small will also make them load faster. In particular, try to limit the graphic's height. Vertical space is "golden" on a Web page, quite apart from loading speed. When users look at your Web pages, they generally expect to see some information. It might look rather unappealing if most of your user's screen is taken up by a large graphics file that takes several seconds to load.
When used properly, multimedia can compliment the contents of a Web site by making it easier and more interesting to browse for information. Various multimedia formats are commonly used on the Internet. When adding multimedia to a Web site, it's important to know strengths and weaknesses of various multimedia formats and know when to use which formats. Examples and tips provided in this chapter will help you select the best multimedia format and optimize various multimedia files at your Web site for transmitting via the Internet.
FrontPage is an application that is well integrated on other Microsoft Office applications. With FrontPage, it's easy to manage the contents of an entire Web site by using its various GUI Web administration tools. FrontPage also includes a number of special server applications that can be used to set up CGI programs to gather data from users browsing a Web site. The next chapter introduces you to Microsoft FrontPage and demonstrates how it can be used to make Web site development and administration easier.