The way you design with pictures depends on the nature of the information you want to present and the needs and interests of your audience. The overriding fact of graphics on the Web is that the larger the picture--large in square inches, number of colors, or unneeded resolution--the larger the file size and the slower to load. Viewers who mainly want textual information in a hurry will resent graphics that seem empty and merely decorative. Other viewers may be willing to exercise great patience to receive images of compelling beauty or dramatic illustrative power.

However you use graphics, you owe it to your viewers to make the files as fast to load as your goals permit. The following technical notes include techniques for doing this as well as other considerations.

1. File formats: Learn to work with both GIF and JPEG.

The two most common formats for bitmapped images on the Web are GIF (Graphic Interchange Format) popularized by CompuServe and JPEG (Joint Photographic Experts Group) format. Most early Web browsers displayed inline (see below) GIF files but required a helper application to display JPEG images. Current versions of Netscape Navigator and Mosaic will display inline JPEGs. Both file types include specifications for image compression to reduce file size.

Because of copyright issues relating to the GIF compression scheme, the open JPEG format is likely to become more popular on the Web. JPEG is superior in certain other ways as well. It can accommodate 24-bit color while GIF is limited to 8. JPEG offers more efficient compression of continuous tone (photo-like) images than GIF. On the other hand, GIF images currently can have transparent backgrounds and be interlaced (see below) while JPEG files cannot. This may change as JPEG becomes more popular for inline images. Images containing large areas of flat color compress well in GIF format.

For the present, choose GIF or JPEG based on the combination of characteristics that best suits your requirements and your image-processing software.

2. Use inline graphics except for special purposes.

A graphic element placed in an HTML file so that it displays in linear sequence among with the other page elements is called an "inline" graphic. To display it properly, the browser must be capable of recognizing and displaying the graphic's file format in inline form. Graphic files that a browser cannot display in line must be handed off to a "helper application" for display, which interrupts the continuity of the viewer's experience of the page. Inline graphics can be directly manipulated in composing page layouts, and the trend is for browsers to accommodate more types of inline formats.

Some images require larger scale or higher resolution to be effective. These must be handed off to helper applications. One way to use inline graphics for speed without sacrificing impact or detail is to include a small "thumbnail" version of the graphic in the composed layout. The thumbnail serves as a link anchor pointing to a glorious large-format version of the image for those interested enough to click on the thumbnail and wait for the larger file to display.

3. Low-bandwidth network connections mean long loading times.

Many factors determine the speed with which a Web page displays in your browser window--your computer's processing speed, the speed of your monitor and video drivers, the amount of memory in your computer--but the controlling factor is usually network transmission speed, or bandwidth. Viewers with Ethernet-speed or faster Internet connections may experience remarkable performance, but those with dial-up access may endure tedious delay. The large file sizes of graphics (as well as audio, motion video, and other media) cause them to slow Web page transmission. If your audience includes many dial-up viewers, be thoughtful in your use of images, and do your best to "tune" your graphical pages for fastest loading.

4. Predefine the height and width of images in your HTML file.

The (Netscape) height and width tags allow you to change the size of an image in your Web page. It is much better to do such scaling in an image processing program where you can delete any excess resolution and keep your image file compact. You should still use height and width tags with every image, however--after you already know the image's dimensions in pixels. Predefining the image's size in this way allows the image to begin loading immediately. The viewer then has a sense of the graphic's mass on the page and the loading of succeeding text is not delayed. Without the tags, the browser must analyze the image file to determine the size as it is transmitted. This results in a delay before the graphic begins to paint the screen, making the load seem slower.

5. Interlace GIF images to enhance apparent speed.

Software products such as GIF Converter and the Photoshop plug-in PhotoGIF allow GIF images to be saved in "interlaced" form. On browsers that recognize interlaced GIFs, such files appear during loading in horizontal bands, each of which repaints at successively higher resolutions. Coupled with predefining the graphic's size, interlacing provides instant "progress" on the viewer's screen--subjectively much more acceptable than a long wait followed by the molasses-like painting of an image from top to bottom in a single pass.

6. Control bit depth of images to keep files small.

The number of colors or grays a graphic file can contain is a function of its "bit depth"--the number of data storage bits available to describe each sample point of the bitmapped image. Most current color or grayscale monitors display 256 colors or shades, or 8-bit color. At the small sizes and low resolution of most Web pages, however, lower bit depths often produce quite acceptable results. Always save your graphic files at the lowest bit depth adequate to the effect you seek. Deliberately reducing a photo to a limited palette--say 3 or 4 bits-- may create banding or solarization-like effects that can be graphically powerful. The traditional techniques of duotone and tritone can also be effective on Web pages and they typically require modest bit depth.

7. Use transparent backgrounds to "float" images.

There are software programs that allow you to select one color in a GIF image and define it as transparent (for Netscape and other browsers that recognize the GIF 89a file format). This is normally most useful for removing the backgrounds from drawn objects or type, which then appear to float on the browser window background color along with the standard fonts and other elements. Such floating images are often preferable to an arbitrary welter of rectangles with no considered relationship to each other or to the shape of the browser window.

Two cautions when creating GIFs with transparent backgrounds: First, be sure to set your background color to one that appears nowhere else in your image. If not, the image may appear to have "holes" when it displays over the browser background color.

Second, select the appropriate background color for GIFs made from vector-based type or images before you save an anti-aliased version of the file. Anti-aliasing softens jaggies by blending intermediate tones between object color and background color at the edge of the object. Transparency can only replace one shade, however. If the GIF has a background much different from that where it will ultimately appear, making the background transparent will still leave a halo effect around the object after anti-aliasing. So choose a background color close to your page background (this can be done in Photoshop or another image processing program), then save an anti-aliased version, then define the background color as transparent.

v

Other things being equal, a good choice for a default background color to define as transparent is Mosaic standard gray. This choice will blend in to the background on browsers that don't recognize "transparency," yielding a transparent effect both there and on smarter browsers.

8. Don't forget to provide informative alternative text for your graphics.

Text-only browsers like Lynx, and graphical browsers configured not to display images, will not show graphics files. HTML therefore provides tags for alternative text. If an image is small and strictly decorative, you may choose to show something simple like "decorative image." Usually, viewers are better served by something more substantive. Illustrations, infographics, charts, and similar images should be described, and essential information repeated in text form if possible. Thus interested viewers using graphical browsers may elect to view specific images, and viewers on text-only browsers will be better able to follow the structure and sense of your page.

One approach that works especially well for data graphics that can be roughly duplicated in text form is to redirect text-only browsers to a separate HTML file consisting of such a duplicate. Although graphical browsers running with images off cannot recognize the redirection and receive the text-only alternate, text-only browsers can see a better-composed page. Special restrictions and considerations apply when the graphic is used as part of a menu presentation (see the Menu Presentation section of this guide).