This document is a supplement to
Editing for Clear Communication
Copyright 1996-1999,
Copyright 1996-1999,
Thom Lieb


No portion may be reused without the author's permission.

Return to
Table of Contents

Further Reading:
"Spotlight on Graphics," Builder.com

Steve Outing, "The Slow Evolution of Animated News Graphics," Editor & Publisher Interactive, 23 April 1997 ($)

Steve Outing, "Animations on the Web: The Down Side," Editor & Publisher Interactive, 30 September 1996 ($)

"Choosy Developers Choose GIF 89a" by Kevin J. Edwards

Jeffrey Veen, "Whatever Happened to PNG?" Webmonkey, 22 February 1999

Information on the
PNG graphics format

To learn more about
this college editing textbook or to order
an educational review
copy, please visit

McGraw Hill.

(The childproof cap and cavity graphics used on this page were prepared by George Rorick of Knight Ridder Tribune Graphics News in Motion. The graphics may not be reused without permission.)


Editing for the Web

Graphics and Animation

On the Web as in print, a good picture is worth a thousand words. But a poorly thought-out picture can lose you a thousand visitors.

No matter the medium, every graphic should have a purpose. Don't clutter your pages with useless images that add to user download times, but do use locator maps, charts and other graphics that help reader understanding.

So far, HTML can handle graphics only in only a few of the nearly 100 formats available. The most common are GIF (pronounced "jif," like the peanut butter) and JPEG. GIFs are good for simple graphics that use only a few colors; JPEGs are better for photographs and other graphics that have subtle gradations in color. Popular image editing programs such as Photoshop, Image Ready and Fireworks can create images in either format; they also offer a special color palette to ensure that graphics will appear identical — well, at least similar — from one computer screen to the next. Other programs convert graphics produced in different formats into GIFs and JPEGs.

A third graphics format endorsed by the World Wide Web Consortium, Portable Network Graphics (PNG), promised several advantages over GIFs. But years after its introduction, the format is still not widely supported or used.

Despite the limitations of file types, Web producers have a wonderful advantage over their print counterparts: the ability to add animations to graphics. These come in two varieties:

1) Animated GIFs: These are simple collections of a handful of graphic images that flash onto the screen one after another. Animated GIFs can be built easily using GIF Builder for the Mac or GIF Construction Set for Windows.

The best animated GIFs are simple presentations that show how something works. For example, here's one that shows how to remove and replace the childproof cap from a prescription bottle.

Notice that the animation ran once, then stopped. That's far better than the endless loop animations that are becoming popular, such as this one. After one or two cycles, they do little more than annoy the reader. In addition, whether they run continuously or not, animated GIFs can cause problems for some Web browsing software, particularly when more than one is used on a page.

2) Full animations: Sometimes a few images are not enough to show a complicated procedure, or narration is needed to fully explain what's happening. In those cases, you can use full animations such as this one on a new dental technique for detecting cavities. Because full animations are large, you should not have them load automatically, but simply provide a link for visitors who choose to download and watch the animations play.

Another nifty graphic tool is the image map. Not necessarily maps in the conventional sense, image maps permit Web producers to make any part of an image "clickable" to lead the viewer to another page. Many Web publications use image maps as a visual table of contents; check out how News.com uses an image map this way at the top of the page. Preparing image maps is simple with shareware programs such as Live Image for Windows, as well as with multifunction programs such as Macromedia Dreamweaver and Adobe Image Ready.

Ultimately, using graphics on a Web page is a balancing act. You want to create lively looking pages, but you don't want to annoy your visitors with worthless graphics. If you strike the correct balance, your pages will be picture perfect.

Next page Table of Contents Email the author