DocB's WebDesign Clinics

Purpose/Audience

Tone/Message

Layout/Design

Site Storyboard

Templates

Great Content

Great Graphics

Multimedia

Universal Design

Quality Control

Reach the World

WebDesign Clinic#7:
Effective Graphics: A Picture's Worth 1,000 Bytes

Graphics can enhance your message and your visitor's experience. They also slow down page loading and can be distracting and valueless. Don't choose between impact and usability; just keep the 'signal-to-noise' ratio high, and manage bandwidth considerations well.

Image File Formats: Two types of graphics images are usually used on Web pages: .jpgs and .gifs. The .png format showed some promise, but has not as yet caught on widely. While some browsers support .bmps, you are better off sticking to the 2 most common formats.

JPEG (.jpg) is best for photographic or continuous tone images, are highly compressed, and although they are 24-bit images (16 million colors!), can be smaller than a comparable 8-bit .gif. But they can look distorted on 256-color displays, and may download slowly because they are decompressed in the browser.
GIF (.gif) is good for flat color graphic illustrations or clip art. Color .gifs are 8-bit (256 colors) or less and use lossless compression. Line-art can be 1-bit, and b&w photos, 8-bit grayscale. Two hints: turn dithering off before saving a .gif, and for most, make them transparent (set the background color to not show up).

Designing Graphics: Make sure your graphics are consistent with both the tone and the look and feel of your site; this site uses much more informal graphics than would be appropriate on a corporate site. For creating and manipulating images, get a graphics program, like the excellent and reasonaably priced Paint Shop Pro, or the more expensive but industrial strength Adobe Photoshop. Please remember that there is an implied copyright on everything published on the Web unless it says differently. Many sites provide you free graphics elements to use; to use graphics from other sites, ask the author for permission first, maybe in exchange for a credit. And don't reference the graphic on another site; upload it to yours.

Bandwidth Conservation: You won't like this <G>: We believe that all the graphics on a page should ideally come in under 30K-60K, total; when not possible, keep them slim as you can. ALWAYS optimize graphics; your graphics program should allow that option, or use a special program like ULead's SmartSaver Pro.

Use graphical elements (illustrations, bullets, dividers, etc.) only when they truly add value. And reuse the same components; they will be cached and load quicker subsequent times.
ALWAYS use HEIGHT=, WIDTH=, and ALT= tags to speed up loading and to make sure your layout stays the same if the users has image loading turned off.
Since photos are often bandwidth hogs (or 'j-pigs' <G>), consider providing a small thumbnail or clipart link to a larger photo on its own page.
Using image maps? Use client-side processing, make the clickable areas clear, avoid wasted space, and provide a text menu for those without images on. Small buttons in a table may load faster as a navigation device than an image map will.
Banners and other large graphic elements should be no wider than 460 pixels. The exception is a background image; these should be at least 1200 pixels wide to avoid repeats at high resolutions.

Managing Color: You should manage color because of browser display constraints and bandwidth concerns. Of course, aesthetics and readability are prime concerns as well.

Use the same palette (range of colors) for all the images on a site. A 'browser-safe' palette of 216 colors will look the same on PCs and Macs; you can download the .zip file here, unzip, and use the .pal file in Paint Shop Pro (thanx to Lynda Weinman's excellent work). When you import a graphic into your drawing program, click Load palette and choose this one. Or design or import a graphic, Save its Palette, name it, and Load that palette into your other images as you make them.
Try decreasing the number of colors to 6 or 4 bit. This dramatically reduces size, and many elements only have a few colors. Experiment.
These considerations (especially using the same palette) are multiplied when working with animated .gifs.
Check out more suggestions at WebReference's Optimizing Graphics.

Backgrounds: If you use a background image (and you need not---just set the background color), use the smallest tiles possible for your backgrounds. If your background is a non-repeating pattern horizontally, you must make it at least 1200 pixels wide; avoid huge backgrounds to prevent slow loading, but make sure they don't repeat in an undesired way at high resolutions. A highly compressed .jpg or simple .gif of simple patterns with the right match of text color to assure readability is best. And set your background color to a similar color so that those without images on will still see your text.

Now that you've got the basics, let's go for gee-whiz. In the next installment, we'll look at Special Gimmicks, including frames, animations, applets, sounds, etc.

NEXT: WebDesign Clinic#8: But Can It Sing and Dance?