Using GIFs

The GIF file format has an option for creating animations that provides web site designers with a low-tech option for adding moving images to web pages. The software used to create animated GIFs is free and easy to use. And since GIF is a format supported by most browser software, you can add animations to your pages with the assurance that most visitors to your site will be able to view them. However, there are two main drawbacks to using animated GIFs, the first of which is file size and the second, distraction.

How it works
The animation option combines any number of GIF still images into a single file. There are a number of animation programs that will convert your still "frames" into an animated GIF; we use a freeware program called GifBuilder. Using a simple drag-and-drop interface, we import PICT files created in PhotoShop. GifBuilder will accept an imported palette or create a custom palette, and it allows you to set frame durations, transparency, and playback options such as looping. Once we have set all the parameters and previewed the animation, we save the file, at which point GifBuilder packages the still images together as a single animated GIF.

How much it weighs
Bandwidth is an important consideration when creating animated GIFs. Since this is an uncompressed file format, each frame in the animation carries its full weight, so if you have 10 frames of 10k PICTs, you end up with a 100k file to push through the wire. However, since animated GIFs do "stream" in the sense that they begin to play before they are fully downloaded, there is some flexibility. It may be too much to ask viewers to wait for a 100k GIF still image to load, but a 100k GIF animation that begins to play after 40k has loaded is certainly reasonable.

Enhancement or distraction?
Animation should be meaningful, not distracting. Ideally, it should add something to the content of your page. What it definitely should not do is disrupt your reader's concentration with needless chatter.

Splash screens are a good place to use animation. Animated images can provide just the right amount of pizzazz to attract viewers into your site. But be sure to keep the file size modest. Requiring a lengthy download right at the start of your site will lose all but the most committed viewers.

If you are using animation as content - e.g., to help illustrate a concept or technique - open the animation in a secondary window using the TARGET="main" parameter of the A HREF tag. That way your readers can view the animation and then close the window. If you present the animation on the main content page it will interfere with the other page elements.

GIF files
The Graphic Interchange Format (GIF) was popularized by the Compuserve Information Service in the 1980s as an efficient means to transmit images across data networks. In the early 1990s the original designers of the World Wide Web adopted the GIF format for its efficiency and widespread familiarity. Today the overwhelming majority of images on the Web are in GIF format. Virtually all Web browsers that support graphics support the GIF file format for inlined images. The GIF format incorporates a compression scheme to keep files sizes at a minimum, and GIF files are limited to 8-bit (256 or fewer colors) color palettes. There are now several slight variants of the basic GIF file format that add support for transparent color, and support for the interlaced GIF graphics popularized by the Netscape Navigator Web browser.

You may see references to the different GIF formats, such as "GIF87a," or "GIF89a." All forms of GIF images will work in Web browsers that support the basic GIF file format, so that you do not have to worry whether your readers will be able to see your GIF graphics, regardless of the GIF version that you use. Users whose browsers support the transparency and interlacing (such as Netscape Navigator and Microsoft Explorer) will see more sophisticated visual effects, but everyone will see your basic GIF images.

GIF File Compression
The GIF file format uses a relatively basic form of file compression (Lempel Zev Welch, or LZW) that squeezes out inefficiencies in the data storage without causing a loss of any data ("lossless compression") or distortion of the image. The LZW compression scheme is most efficient at compressing images with large fields of homogeneous color. It is not very good at squeezing complex pictures with lots of grainy texture. All variations of the GIF graphics file format incorporate LZW file compression.

The conventional (non-interlaced) GIF graphic downloads one line of pixels at a time, and Web viewers like Netscape display each line of the image as it gradually builds on the screen. In interlaced GIF files the image data is stored in a format that allows Netscape (and other viewers that support interlaced GIFs) to begin to build a low-resolution version of the full-sized GIF picture on the screen while the file is still downloading. The "fuzzy-to-sharp" animated effect of interlacing is visually appealing, but the most important benefit of interlacing is that it gives the reader a quick preview of the full area of the picture. This preview effect can be misleading, interlaced graphics are not faster-loading than non-interlaced graphics, they just look as if they download faster because the rough preview comes up faster.

Note that the example below only work well the first time you try it. After that your browser will probably cache the image locally, and subsequent loading will occur (very quickly) from your hard disk, not from the Web. Use your browser's "reload" button to repeat the loading of the graphic if it loads too quickly to see the difference.
 

Understand the medium
Readers experience Web pages in two ways: as a direct medium where pages are read online, and as a delivery medium to access information that is later downloaded into text files or printed onto paper. Your expectations about how readers will typically use your site should govern your design decisions. Documents to be read online must be concise, with the amount of graphics carefully "tuned" to the bandwidth available to the mainstream of your audience. But don't patronize your readers or insult their intelligence. The common advice that the Web is dominated by semi-literate "screenagers" who won't read more than two sentences in a row is grossly exaggerated, and probably irrelevant to you and your audience anyway. You do not need to "dumb down" your content or shave it to a meaningless skeleton. Just be aware that readers will typically want to print longer pages or more complex presentations to read "offline" from paper.

Establish a visual hierarchy
The primary task of graphic design is to create a strong, consistent visual hierarchy, where important elements are emphasized, and content is organized logically and predictably.

Graphic design is visual information management using the tools of layout, typography, and illustration to lead the reader's eye through the page. Readers see pages first as large masses of shape and color (see below), with foreground elements contrasted against the background field. Only secondarily to they begin to pick out specific information, first from graphics if they are present, and only afterward do they start parsing the "harder" medium of text and begin to read individual words and phrases.  Thus the overall graphic balance and organization of the page is crucial to drawing the reader into your content. A dull page of solid text will repel the eye as a mass of undifferentiated gray, but a page dominated by poorly designed or overly bold graphics or type will also repel sophisticated users looking for substantive content. What you want is an appropriate balance that attracts the eye with visual contrast.  Proportion and "appropriateness" are the keys to successful design decisions, but those things can only be determined within the context of your overall purpose in developing a Web site, by the nature of your content, and most importantly, by the expectations of your audience.

Direct the reader's eye
In the West readers of English read from left to right, and from the top of the page to the bottom. This fundamental visual axis dominates most design decisions, and is the basis for most conventional graphic design of print publications. In page layout the top of the page is always the most dominant location, but on Web pages the upper page is especially important, because the top four inches of the page is all that is visible on the typical 14 to 16 inch office computer monitor.

Subtle pastel shades of colors typically found in nature make the best choices for background or minor elements, especially if you are new to graphic design and color selection. Avoid bold, highly saturated primary colors except in regions of maximum emphasis, and even there use them cautiously. Type must always contrast sharply with any background color. If you have a dramatic or complex graphic scheme in mind, hire a professional graphic designer to execute it. If you are not a designer and must do things yourself, keep everything conservative, conventional, and simple.

Graphic distractions
Beware of graphic embellishments. Horizontal rules, graphic bullets, icons, and other visual markers have their occasional uses, but apply each sparingly (if at all) to avoid a patchy and confusing layout. The same applies for the larger sizes of type on Web pages. One reason professional graphic designers are so impatient with HTML is the grotesquely large type sizes displayed by most Web browsers when using the "H1" and "H2" header tags. The tools of graphic emphasis are powerful, and should be used only in small doses for maximum effect. Overuse of graphic emphasis leads to a "clown's pants" effect where everything is garish and nothing is really emphasized.

Be consistent
Establish a layout grid and a style for handling your text and graphics, then stick with it to build a consistent rhythm and unity across all the pages of your site. Repetition is not boring; it gives your site a consistent graphic identity that reinforces a distinct sense of "place," and that makes your site more memorable. A consistent approach to layout and navigation allows readers to quickly adapt to your design, and to confidently predict the location of information and navigation controls across the pages of your site.  If you choose a graphic theme, use it throughout your site. Metadesign's home page banner (below) sets the graphic theme for the site, and introduces distinctive typography and a set of navigation icons:

  (www.metadesign.com/)

This is a banner at the top of an interior page in Metadesign's site. Note how the typography and icon theme is carried through to all interior banners. There is no confusion about whose site you are navigating through:

  (www.metadesign.com/)
 

"Style"
Don't set out to develop a "style" for your site, and be very careful about simply importing the graphic elements of another Web site or print publication to "decorate" your pages. The graphic and editorial style of your Web site should evolve as a natural consequence of consistent and appropriate handling of your content and page layout.

This section contains techniques to optimize the look and efficiency of your Web page graphics. Although electronic publishing frees you from the cost and limitations of color reproduction on paper, you will still need to make some careful calculations (and a few compromises) if you want to optimize your graphics and photographs for various display monitors and current Internet access speeds.

Graphics and modems
Most of the present Web audience consists of people accessing Internet service providers via 28.8 kilobit per second (kbps) modems from their homes, offices, or remote work sites. At 28.8 kbps you only get about 3.6 kilobytes (KB) per second (remember it takes 8 bits to make each byte). This means a modest 36 KB graphic on your Web page could take 10 seconds or longer to load into the reader's Web viewer. Actual data transmission rates will vary, depending on the type of modem, the speed of your Web server, the type of Internet net connection used, and other factors, but the overall point is clear: the more graphics you use, the longer your reader will have to wait to see your page.

A full-screen graphic menu on your home page, plus background graphics could leave your modem-based readers twiddling their thumbs for a full minute or more, even if they have a state-of-the-art modem and good Internet connections. Look at your watch (or better yet, hold your breath) for a full minute, then figure out if that is the first thing you are willing to ask your users to do when they visit your Web site. A better interface strategy would be to gradually increase the graphics loading of your pages, drawing users into your site with reasonable download times. As users become more engaged with your content, they will be more willing to endure longer delays, especially if you give them notes on the size of graphics, or warnings that particular pages are full of graphics and will take longer to download.

Graphics and intranets
Luckily for graphic designers, many Web sites are created primarily for educational, organizational, or commercial users who access their local intranets and the larger World Wide Web at Ethernet speeds or greater. Graphics and page performance are also an issue for these users, but it makes little sense to arbitrarily restrict Web page graphics in the cause of "saving bandwidth." The bandwidth nazis and gearheads always miss this point: graphics are what drew most people to the Web in the first place. If you got the access speed, indulge!

Uses for GIF and JPEG files
Now that Netscape and other browsers are supporting both GIF and JPEG graphics in inlined Web page images you could use either graphic format for the visual elements of your Web pages. However, in practice most Web developers will continue to favor the GIF format for most page design elements, and choose the JPEG format mostly for photographs, complex "photographic" illustrations, medical images, and other types of images where the compression artifacts of the JPEG process do not severely degrade image quality.

JPEGs
Another graphics file format commonly used on the Web is the Joint Photographic Experts Group (JPEG) compression scheme to minimize graphics file sizes. JPEG images are full-color images (24 bit, or "true color"), unlike GIFs that are limited to a maximum of 256 colors in an image. Thus there is a lot of interest in JPEG images among photographers, artists, graphic designers, medical imaging specialists, art historians, and other groups for whom image quality is paramount, and where color fidelity cannot be compromised.

JPEG uses a very sophisticated mathematical technique called a discrete cosine transformation to produce a sliding scale of graphics compression. Thus you can choose the degree of compression you wish to apply to an image in JPEG format, but in doing so you also are also choosing the image quality. The more you squeeze a picture with JPEG compression, the more you degrade its image quality. JPEG can achieve incredible compression ratios, squeezing graphics down to as much as 100 times smaller than the original file. This is possible because the JPEG algorithm discards "unnecessary" data as it compresses the image, and is thus called a "lossy" image technique. The results are easier to see than to explain.

Save your original uncompressed images!
Once you compress an image with JPEG, you have lost data and can never recover it again, so always save an uncompressed original file of your graphics.

A new form of JPEG file called "progressive JPEG" gives JPEG graphics the same gradually-built display seen in interlaced GIFs, but most image editors still do not yet support progressive JPEG files. (Debabilizer 1.6 for the Macintosh is one of the few). Like interlaced GIFs, progressive JPEG images usually take longer to load into onto the page than standard JPEGs, but do offer a quicker "preview" to the reader.

JPEG Image Artifacts
The JPEG algorithm was optimized for compressing conventional pictorial photographs, and is also very good at handling complex realistic illustrations (which look like photographs). Photos and art with smooth color and tonal transitions, and few areas of harsh contrast or sharp edges are ideal for JPEG compression. However, most page design elements, diagrams, the typography within images, and many illustrations are composed of hard-edged graphics and bright colors that are seldom encountered in photographs (part a; b is a magnification of the diagram). JPEG compression can be quite poor at handling many computer-generated graphics, buttons, type in images, or any other hard-edged "artificial" colored object seen in artwork or diagrams. When compressed with JPEG, diagrammatic images show a "noise" pattern of compression garbage around the transition areas.

Advantages of GIF Files

The most widely supported graphics format on the Web

• All graphic Web viewers support the GIF format for inlined images.
• GIFs of diagrammatic images look better than JPEGs.
• GIF supports transparency and interlacing

Huge compression ratios are possible, for faster download speeds.

Web background colors offer a "zero-bandwidth" means to change the look of your pages without adding graphics. They also allow you to increase the legibility of your pages, tune the background color to complement foreground art, and to signal a broad change in context from one part of your site to another.

Background patterns and background images are the most controversial graphic elements on Web pages. Both features add graphic complexity to pages without increasing their legibility. Poor choice of background graphics has generated some of the ugliest pages on the Web. However, in the hands of experienced and knowledgeable graphic designers the use of these background features can result in Web pages as stunning in graphic impact as anything seen in multimedia CD-ROMs.

Changing the colors of page elements
Netscape allows you to specify a specific color for the background, text, and hypertext links of your Web page, making it possible to get rid of the default gray or white background without having to download big graphics. You can also manipulate the colors of other page elements in web pages, using a simple set of HTML extensions. These extensions may be the most efficient way to give your pages a distinctive look, because the browser handles all of the color changes, and your readers do not have to sit still while you download fancy graphics to them.

Picking the background color is easy in WYSIWYG (what you see is what you get) graphic web page layout programs. Unfortunately, picking a color without one of these Web page editors is a procedure only a gearhead could love. The color is specified in the tag in hexadecimal code, where the six elements give the red, green, and blue values that blend to make the color. In the tag, the hex code is always preceded by a "#" sign: (#RRGGBB). Since this whole business is handled visually by the new generation of WYSIWYG page editors, we will not go into further details on the arcana of hexadecimal RGB color selection.

Using the HTML extensions for changing the color of page backgrounds, text, and link colors is easy, you just add a few extensions to the "BODY" tag at the beginning of your HTML code for the page (this particular tag yields a white background):

<BODY BGCOLOR="#FFFFFF">

To be suitable for use as a texture the graphic should be a small GIF or JPEG, ideally no more than about 100 by 100 pixels in size. In our experience, the JPEG background patterns load slightly faster than equivalent GIF graphics. Typical graphics used for background patterns are homogeneous textures.

Background graphics are added to a Web page by Netscape-specific modifications of the standard "BODY" HTML tag:

<BODY BACKGROUND="example.jpeg">

How you might use background textures depends entirely on your goals for your Web site, the access speeds that are typical for your target audience, and whether the multimedia/CD-ROM style look (fast becoming a cliche) meets the aesthetic goals of your Web site. Using large or visually complex background textures on any page that is heavily accessed by busy people looking for work-related information would be foolish--the long download times, unprofessional aesthetics, and poor legibility would instantly create ill will in your users. However, in the hands of skilled graphic designers creating Web pages specifically designed for graphic impact, the option to use background textures opens up many interesting visual design possibilities. This is particularly true in universities and commercial organizations where fast network access is commonplace and bandwidth is not the major issue it is with modem-based users.

My advice is: if you don't have professional graphic design training or experience in constructing complex graphic communications, then stay away from background images or textures--the chances of  making a bad functional and aesthetic mistake are overwhelming.