What you need to know about Web graphics

I can't teach you to create graphics, but I will point you to some helpful tutorials about Web design and graphics creation. But first, let's look at some facts of Web life:

• Graphic formats. In case you didn't already know, the Web currently permits only GIF and JPEG formats. (See Webmonkey's discussion of GIF vs. JPEG.) And there's another format called PNG (pronounced "ping") that will join the roster of Web formats when and if all browsers decide to support it.

The above-mentioned formats are bitmapped, which is something you already knew. But what you may not know is that it is now possible to include vector graphics - even vector-based interactive animations - on Web sites, thanks largely to Macromedia's Flash. Although Web surfers must have the Shockwave/Flash plugin to view these goodies, this innovation holds great promise for greater flexibility in Web design. Why? Because vector graphics load much faster than bitmapped graphics of the same size. Soon all browsers will probably come with the Shockwave/Flash plugin built in, so this technology is definitely worth looking into.

Note: In case you're not sure of the distinction between bitmapped (raster) images and vector images, check out an article "Bitmapped vs. Vector," provided by the University of Wyoming.

• Image resolution. Since the typical PC monitor has a display resolution of 72 dpi (dots per inch), that's what you're stuck with in designing for the Web. While the low-res nature of such graphics puts a damper on your soaring artistic aspirations, it's mighty nice to work with graphics that don't take up so much space on your hard drive.
• Web-safe colors. You may have heard of the "Web-safe color palette," sometimes called the browser-safe palette. Since PCs and Macs use quite different color schemes, this palette was devised to provide a set of colors that display the same on both platforms. Graphics using these colors will also load quickly because they are native browser colors--meaning the browser will not have to take the time to mix two or more of its native colors to create the intended color. Let dotparagon.com explain why you're limited to the 216 colors in the the Browser Safe Color Palette, also known as the Netscape Palette.
  

  Note: Colors will always appear several shades lighter on a Mac monitor, so avoid colors that are so light they may wash out when viewed on a Mac.

Today, most graphics programs provide a browser-safe palette, so it's easy to create browser-safe graphics.

• Dealing with Hexadecimal Color Codes As you have probably learned by now, Web browsers identify colors by hexadecimal codes. And you'll want to keep a browser-safe color chart handy, like the ones Lynda Weiman offers. Choose from the chart arranged by hue or by value. In either case, you can copy the chart to your hard drive by right-clicking (Windows) or pressing and holding on the graphic (Mac) and then saving the GIF file to a spot on your hard drive where you can readily find it while creating graphics. Since these charts display both the RGB and hexadecimal values of each color, it will be easy for you to find just the right color code so you can mix and match your background and graphic colors.

  Netscape and later versions of Internet Explorer allow you to use color names instead of hexadecimal codes. Color names do not work in older versions of IE or in Opera 6. You may want to bookmark this fun site that identifies the Netscape Color Names as well as their hexadecimal numbers.To be on the safe side, you can use the color name chart to locate the color you want, then use the hexadecimal code for that color in your code.You will need to test to be sure other browsers recognize these names. In any event,

  Spectroscope is a clever program you can download (for free) and keep handy for choosing colors for your Web site. The default colors are Web-safe, but you can use this tool to choose background, text, and link colors. Spectroscope gives you the hex and RGB values of the colors you've created.

  If you feel the 216 colors are too limiting, you'll enjoy Colormix. By mixing two or three browser-safe colors, it is possible to create over 10 million browser-safe combinations. And this clever Web site does the mixing for you!

• Alt tags and size attributes. Be sure to include alt tags for all graphics. This is important for users who use text-only browsers or instruct their browser not to display graphics. Also include height and width attributes; this helps the page load faster since the browser knows how much space to allocate for the graphic. A correct image tag looks something like this:

  <IMG SRC="images/logo.gif" HEIGHT="108" WIDTH="612" ALT="ABC Inc. Logo">

Optimizing graphics for fast download

However skilled you are in creating graphics for print media, you must shift gears drastically to embrace the concept of how computers display color. Suzanne Stephens offers an excellent discussion on resolving the problems of graphic compression. She begins with a most important statement: "The greatest annoyance when accessing web pages is the long wait for graphic to download and display."

Remember the old saying (that I just invented): "Load unto others as you would have others load unto you."

Animation options for the Web

Animations certainly liven up Web pages and can (in rare instances) add value to the reader. Only you can judge whether the addition of an animation that slows page loading will be appreciated by your audience or resented. I suppose it's a value judgement: Do you think your readers want to grab some information fast and move along, or do they want to be entertained and will wait patiently for the page to appear? Let's take a look at the possible animation formats you might use:

Animated GIFs are fun, and since you can find scads of them (good and bad) that you can easily pluck and paste, you will be sorely tempted to grab every one you can find and sprinkle them generously on your Web pages. I suggest that you do that--put lots and lots of the cute little critters on your Web site. Watch them cavort and careen on your screen. Get it out of your system. Then, before you inflict all this frivolity on other Netizens, get real and decide what form of artwork will actually add something to the message your Web site needs to convey to the world.

Using clip art and "borrowed art"