Graphics Toolbox
Avoid the Five
Cardinal Graphical Sins
Say no to lazy images and bizarre colors. By David Busch
Graphics built the Web: Without them, the Net would probably have remained a text-based academic backwater. So graphics are an asset to a Web site, right? Unfortunately, it's not quite that simple. While we all strive for pages that sparkle with clean, compelling images that capture visitors' attention, sometimes our efforts fall short of that goal and our graphics become more a liability than an asset.
Fortunately, a high percentage of common, graphic-based problems have relatively simple solutions: If you've been guilty of committing one or more of the five cardinal Web-graphics sins, one of these tips may lead you on the path of redemption.
Symptom: Pages that hang because an image won't load. Sin 1: Suicidal Pages
Cause: No matter how picture-perfect its design, a page may hang if one or more of the images referenced in it becomes unavailable to a visitor's browser. Instead of just skipping over the errant graphic, the browser may pause indefinitely, waiting for it to download. Whereupon your visitor hits the Back button and vanishes for greener and faster-loading pastures.
The reasons an image goes AWOL aren't important here. Perhaps there's an error in the
<IMG SRC>tag, or you put the graphic in the wrong subdirectory. The problem can be as simple as a Web counter image on another server that's running slow.Solution: Always, always include the height and width of a graphic image, using the
<IMG SRC>tag'sHEIGHT=andWIDTH=parameters. While most HTML authoring programs do this for you, it's an easy item to forget when you're editing or hand-coding a page. When the dimensions of the image are specified in the tag, the browser leaves space for it and moves on to download the rest of the page. If the image never shows up, your visitor sees a placeholder icon, but can view the rest of the page.Symptom: Visitors complain of bizarre color shifts, funny speckles, and other strange effects that never seem to manifest themselves when you view your pages. Sin 2: Angry Colors
Cause: Not everyone has a 24-bit display card like the one you used when preparing your Web graphics. So, what happens when a visitor with an 8-bit, 256-color display visits your page and hits those million-color JPEG images? Your visitor's system creates a palette of colors that it can display, likely jettisoning many of the hues in your carefully crafted images. If you have multiple images on a page, the "optimized" palette produced for the first one won't necessarily suit subsequent graphics. The result? Color shifts. Even 256-color images aren't immune to this problem: There's no guarantee that all the graphics on a page happen to contain the same 256 colors.
Solution: Convert images that don't need more than 256 colors to 8-bit format. The trick is not just changing to 256 colors, but converting to the right 256 colors. What you don't want is an equal representation of all the colors in the spectrum. In an image of a human face, for example, an equal spread would give you far too many blues, but not enough pinks, reds, and browns to represent a living person.
Image-editing packages like Adobe Photoshop let you fine-tune the palettes or color look-up tables (CLUTs) they work with. To be on the safe side, select a Web-oriented palette/CLUT if your software offers that choice. In that mode, the image editor will convert the image using a standardized palette of 216 specific colors most often used by Web browsers. However, if your image contains an atypical range of colors, selecting a palette of the most frequently used colors (a so-called adaptive palette) may be your best choice.
The second piece of the solution is to try to use the same palette for as many images as possible. For example, Photoshop allows you to apply a previously defined CLUT to the next and subsequent images being converted. Even if a particular palette isn't the best one, at least the colors won't shift when several graphics are displayed together on a page.
Symptom: Your images aren't always as sharp or colorful as those you see elsewhere on the Web. Sin 3: Lazy Images
Cause: You may just be using the wrong image format using GIF where JPEG would work better, or vice versa. Learn when each kind of image should be used, and you can have a better image in seconds.
Solution: GIF supports only 256 or fewer colors, but offers excellent display on all Web browsers, regardless of the color capabilities of the visitor's monitor. Its lossless compression scheme retains all the sharpness of the original and tends to be best for images like charts and graphs that contain hard edges. In addition, GIFs can be made transparent, to float on a background--interleaved, so they can be progressively revealed as files download, and animated to add action to your Web page.
The JPEG format, on the other hand, handles 16.8 million colors, so it's a good choice for reproducing full color images. It offers smaller file sizes than GIF, although the resulting images may not be as sharp. However, image editors let you trade off sharpness against file size to produce the best compromise. Not all browsers support progressive (interleaved) or transparent JPEG, so if you want to use those two features while remaining compatible with as many visitors as possible, you'll want to stick with the GIF equivalents.
Symptom: Hate mail from visitors with text-only browsers. Sin 4: Text Envy
Cause: Many Web cruisers still use older browsers that can't display graphics. Other visitors to your site may have turned off automatic downloading of graphics to speed their surfing. Such folks may not have a clue about what's on your page, especially if you've put all the descriptive information to your links on clickable images or image maps that they can't see.
Solution: There are two remedies. First, if you use a clickable image or image map to link to another page or URL, make sure you also have a text-based link somewhere on the page. It could be a caption right under the graphic, or you could group all your text links at the bottom of the page.
Second, get into the habit of using the
ALT=parameter with your<IMG SRC>tags, and make sure that the description is useful. If you create a button that reads, "Click Here for Page 2" or have a picture of the Taj Mahal on your page, you should include "ALT=[Click Here for Page 2]" and "ALT= Photo of Taj Mahal." Your consideration will reward even graphics-capable visitors. Should your photo have no caption, the helpful label will pop up when the visitor's mouse cursor passes over the image.Symptom: Most visitors to your page don't linger long enough to let your nifty 200K image files download. Sin 5: Graphical Gluttony
Cause: Even well-meaning Web-page designers don't always take the simple steps needed to reduce the size of their graphics. 200K image files can often be shrunk down to 20K without losing much quality.A 640x480 true-color graphic can look stunning, but that image is nearly a megabyte in size uncompressed. Even under ideal conditions, it takes five to six minutes or longer to download an image that size.
Solution: Try to keep each Web graphic no larger than 25K to 50K, especially if you plan to include several on a page. Rules and buttons can often be trimmed to 7K or smaller. Cropping images or squeezing them with a bit more compression may be all you need. Limit each page to 200K or less in graphics. Confine heavy-duty images to certain pages. Include only enough graphics on your main page to entice visitors into your gallery. Small thumbnail images can be used as a preview of a larger graphic image. You can place the full-size image on another page or have it displayed when the visitor clicks on the thumbnail. That way, a visual clue is provided that helps the user decide whether to proceed to download the full image.
David D. Busch (dbusch@dbusch.com) is the author of Creating Cool Photoshop 4 Web Pages (IDG Books).
Reprinted from Internet World magazine Vol. 8 No. 6, Mecklermedia Corporation. All rights reserved.