Inline graphics are the heart of Web pages. They may take the form of a photo, line drawing, chart, or graph. Because they are seen when the page loads, their ability to communicate information is more immediate than a graphic linked either to a thumbnail or to a textual reference.
The capability of the Web to display an almost endless page is both a positive and a negative as far as images are concerned. Although the Web isn't constrained by traditional page sizes, you should take care when you plan how information is presented to Web patrons. Unless planned carefully, many of your inline graphics may display partially inside and partially outside your browser window. This means that in order to view the image, a person must constantly scroll up and down until the correct amount of information is displayed in the window. Remember how irritated you became when reading a traditional textbook and you had to flip around to find an illustration because the figure and the text weren't on the same or facing pages? It made you mad, right?
The same can be said about well-designed Web pages. Text and the accompanying graphic are always kept within the reader's field of vision. However, because Web pages are variable both vertically and horizontally, their design can be more difficult. If you always put yourself in the place of your most novice user, you run a better chance of designing for content, not for style.
By now you have a good idea about how a graphic gets on your Web
page, and you know several ways to position the graphic and its
supporting text the way you want. You've also been hit over the
head repeatedly with the fact that all browsers are not created
equal. It's difficult, if not almost impossible, to plan for every
possibility.
| Note |
One of the reasons intranet (a Web inside a company or organization) development is an erupting volcano is that with an intranet, Web publications are simplified when everyone has the same hardware and software resources. Intranet may end up being as big as or bigger than the Internet. |
The communication quality and visual appeal of a page can be ruined by poor planning. Take, for example, the exhibit of poor planning shown in Figure 16.1. You don't know what options are available, and you have to scroll to find navigation and contact information. Compare this to Figure 16.2. Note that the scrollbar is inactive, meaning that all the page's information is being displayed. This displays better planning and more effective communication-what every Web page designer should aspire to.
Figure 16.1 : Poor planning can take away from the effectiveness of an inline graphic.
You're a good designer and you always attempt to create the smallest, most efficient graphic possible, which assures short download times. Right?
But occasionally, you may need to use a larger graphic (50KB and above). Rather than making the user wait until the entire image has been downloaded to their computer before beginning the display (which may take between a minute and several minutes), the technique called interlacing begins displaying 1¦8 of the graphic's final resolution and continues until full resolution is achieved. Figure 16.4 shows a graphic as it is displayed in increasing interlaced resolution.
Figure 16.4 : An interlaced graphic in its beginning, middle, and end display.
Once the client sees the graphic, he can make a decision to either continue or stop the download. Considerate, no? Some Web designers interlace every GIF graphic, achieving a sort of cheap animation technique. Reserve interlacing for graphics that need it.
An alternative to interlacing is to use the <LOWSRC> tag. If your target browser recognizes this tag, it's an HTML option to interlacing. LOWSRC works just like the HTML <IMG SRC> tag except that the image (with lower resolution but the same physical size) is loaded with the text and then replaced with the higher resolution version. The client can read the page as the <IMG SRC> graphic loads. If done effectively, the reader isn't really aware that other images are being loaded.
Interlacing a GIF graphic is easy and straightforward if you have the correct utility. To create an interlaced GIF file, follow these steps:
Figure 16.3 : The interlacing option in Graphic Converter.
You are probably wondering why you would want to size a graphic in your image editing program rather than use HEIGHT and WIDTH parameters when loading the image. First, it takes a little effort to determine the height and width in pixels, especially if you don't know the graphic's original dimensions. Second, it is unfair to place the burden of resizing on the user's browser. The user may be on a 9,600 baud line and may have enough trouble just getting the graphic from the Web server, let alone trying to remap the image to his browser. It is just the best practice to presize the graphic.
One exception to this is when you reuse a graphic many times within a Web site. If you download the file each time it is requested because it's a different size, you violate the download once, reuse many rule. So it's a trade-off. One suggestion is to keep the original image at full scale and in its native format. Resize the image at 75 percent, 50 percent, 25 percent, and 10 percent using parallel filenames. Figure 16.5 compares the characteristics of two files, one at 100 percent and another at 50 percent.
Figure 16.5 : The relationship between canvas size and resolution with constraints.
It is unusual to find graphics at the perfect size you want to put onto your Web page. They will either be too large or too small. Too large is better because in reducing you actually increase resolution. Too small is not good because in enlarging you decrease resolution. To resize a large graphic, follow these steps:
Figure 16.6 shows an original JPEG graphic weighing in at 884KB at a beefy 8.8¥6.5 inches-physically too large and in an inappropriate format for an inline graphic. Note what has happened in Figure 16.7. By saving the file in GIF format and resizing to an appropriate 2.5¥1.83, the file size has dropped to a svelte 24KB. Now that's an inline graphic!
Figure 16.6 : Our JPEG graphic in its full size.
Figure 16.7 : Our JPEG graphic converted to GIF and reduced
for page display.
| Tip |
Use filenames that let you easily determine the content, scale, and format of your graphics. Can you tell what cap100.gif, cap50.gif, and cap25.gif are? |
You can solve the great transparency problem by always creating your graphics on a white canvas and displaying them on a white Web page. Wow, what a boring world it would be! You must be able to create transparent background graphics because you probably won't know ahead of time the color of every background on which it will be displayed.
Fortunately, with the help of any of several little utilities this problem is easily surmounted. Plus, almost all new releases of raster editing software include transparency as an option.
The key in transparency is planning. Figure 16.8 shows a graphic which has interior colors the same hue as the background. When the background is turned transparent, so are the interior pixels, leaving holes in your graphic. The solution is to make the background pixels a color that doesn't appear in the body of your graphic. Figure 16.9 shows the same graphic with a uniquely colored background and the result of transparency.
Figure 16.8 : Transparency without concern for interior colors.
Figure 16.9 : Transparency that keeps interior colors.
If the graphic has an anti-alias edge (halo) between its exterior and the background, the fringe will remain after transparency because only one hue can be made transparent. The solution? Either remove the anti-aliased pixels and turn them the same color as the object, or load the graphic on a background having the hexadecimal specification of the graphic's background canvas. If you choose this last solution, you didn't need to make the background transparent in the first place! Figure 16.10 shows our graphic with its mismatched anti-alias fringe.
Figure 16.10: A transparent GIF with mismatched anti-alias.
Once your graphic is the right size and in GIF format, making the background transparent is a simple process. This description assumes that your raster editor doesn't have a transparency option and that you have to use a utility to get the job done. Figures 16.11 through 16.13 show the development of a transparent GIF. To create a transparent GIF graphic, follow these steps:
Figure 16.11: The GIF graphic ready for action.
Figure 16.12: Identification of background color.
Figure 16.13: The result of transparency operation.
| Tip |
For best results, make your graphic transparent before interlacing and always test against various backgrounds. |
BoxTop Software (http://www.aris.com/boxtop/ProJPEG/) offers a Macintosh Photoshop-compatible plug-in that does for JPEG images what interlacing does for GIFs. ProJPEG does more than just bring a JPEG graphic into progressively increasing resolution. It also provides more control over JPEG lossy compression with the benefit of smaller files sizes than you would expect out of your raster editor.
You would want to use the progressive JPEG format when the image fidelity of JPEG is required and the file is larger than roughly 40KB. Or take the safe route-interlace all your GIFs and make all your JEPGs progressive and you'll never be accused of wasting a surfer's time!
Because the default size page you'll be working on is roughly 400¥300 and 72 dpi, almost all images you display will be thumbnails to some degree. For most purposes, a well-dithered GIF graphic accomplishes all intended communication goals.
Occasionally, you'll want to keep the real image on a separate page or in a file format that the client's browser won't burp (fail to load) on if it can't display that format. Use a thumbnail graphic for any of the following reasons:
Figure 16.14 shows a graphic in its full glory and in a low resolution thumbnail. The TIFF file is 24-bit, full-screen 320¥240 and 150 dpi. The thumbnail is 80¥60 at 72 dpi. Note the large difference in file size.
Figure 16.14: A thumbnail and its referenced graphic. Note the differences in file size.
Always start with a graphic that has as much information as possible to make your thumbnail. You'll be sampling the image down both in resolution and in bit depth. To create a thumbnail graphic, follow these steps:
| Tip |
You might get by with an even smaller thumbnail and scale it up in HTML code. This makes for a super small file and effectively reduces the dpi below 72. The penalty you pay in terms of download time with scaling is often offset by the smaller file size. |
By extensively using GIF and JPEG images you can ensure the greatest
readability for your clients. However, graphic files come in a
large number of formats, most of which are not directly supported
by Internet browsers.
| Tip |
Great Web sites include links to resources that potential clients might not have. You can include these with an <A HREF> structure that points to a specific word in another site's HTML code. Many of these resources are free. Others require registration and are active for a specified length of time. |
Your browser may have the capability to associate files of certain types with applications on your hard disk that are capable of viewing them. For example, your browser may not be able to display a JPEG graphic or a QuickTime movie directly on the page. Inform your browser that these helper applications are available. When a file of that type is loaded, control is switched from your browser to the helper application. Figure 16.15 shows http://members.aol.com VideoLinks/index.html with a QuickTime movie file open under Movie Player.
Figure 16.15: A helper application displaying a digital movie in a separate window at http://www2.cybernex.net-mps/VideoLinks/index.html.
Now with all this information about how to get great graphics on your Web pages, you can look at these chapters:
| I don't know how big a graphic will be since I haven't designed my pages yet. What size should I save them in? | |
| You know you won't need more than 640¥480 pixels. You'll probably want to capture as many colors as possible (24 bits) so that when you reduce the image both in size and in bit depth, your raster editor (or browser if you make it do the work) will have the most visual information to work with. | |
| I don't have a program for interlacing my GIF files. Where can I find one? | |
| Try http://www.group42.com/webimage.htm for a commercial product or http://www.aris.com/boxtop/PhotoGIF for a shareware product. | |
| It's me again! How about resources for transparency? | |
| Go for http://www.homepages.com/tools/, or better yet, use http://www.inf.fu-berlin.de/~leitner/trans/ for over-the-Web transparencies. | |
| When I resize my graphic, my dpi jumps around. What's happening? | |
| You have file size constraint on. As you enlarge your canvas, the dpi will drop. When you shrink the canvas, the dpi will climb. | |
| I want to include animation and other cool things on my Web pages. How can I make sure my clients have the helper applications or plug-ins? | |
| Provide information on your splash page (or even a pre-splash page) that says your site has these features, and provide the client means to link to sites that provide these resources. |
