Graphics 101

By Paul Anderson

If you work anywhere near a Web site, sooner or later you’ll have to deal with graphics. Unfortunately, not everyone who winds up handling graphics is a professional designer, and even experienced Web designers don’t always understand that graphics have to be produced in a particular way. On the Web, as with anything computer-related, there are more ways to do graphics wrong than there are to do them right.

In our introduction to graphics, you’ll find the fundamental concepts of images and file formats, including channels and color depth, dithering and gamma correction, vector graphics and image formats. But that is only half the battle of creating Web graphics. You also need to be able to put that knowledge to work. To help get you started, we’ve assembled hands-on how-to guides to six of the most common tasks involving images. These include step-by-step instructions for everything from scaling an image, adding transparency, and reducing colors to taking a screenshot, modifying a GIF, and resaving a JPEG.

By the end of the tutorial, you should be able to manipulate Web images with confidence, avoid common mistakes, and make your sites look as good as possible. Even if you’re an experienced Web designer, you’re likely to find solutions to nagging problems that may have been limiting your designs. We give you the basics. The rest is up to you.

The most common color space that you’ll encounter is RGB, because it’s the way your color monitor works. Your monitor projects various intensities of red, green, and blue light onto a screen–thus the term RGB–to produce the full range of hues and tones. RGB identifies every instance of color by three numbers, called channels. These specify the intensity of red, green, and blue as a number from 0 (dark) to 255 (full intensity).

You can combine these channels to make new colors in the same way that you would mix paints, as shown in Figure A. Red and green light together make yellow; green and blue make cyan; and blue and red make violet. Pairing unequal values creates the incremental colors in between (for instance, orange is red with a bit of green).

Figure A

Color combinations such as the ones above produce pure, bright hues. Using equal values in all three channels produces neutrals ranging from black (all channels at 0) to white (all channels at 255). So color neutralizes as the RGB values approach equivalence: increasing all channels at once adds white, creating a pale tint. Reducing the strongest colors adds black, creating a dark shade. Doing both–setting all values greater than zero but below 255–adds gray and creates a muted tone. Figure B shows some of the possibilities.

Figure B

As you get accustomed to working with RGB, you’ll develop an intuitive sense of the values needed for a given color.

Other color spaces
Most graphics tools let you use HSB (hue-saturation-brightness), which follows the paint-mixing metaphor more directly. Hue is a position on a 360-degree color wheel, with red at 0, green at 120, and blue at 240. Saturation and brightness are both percentages, and when both are at 100 percent you get a pure hue. Reducing saturation toward 0 adds white, while reducing brightness adds black. CMYK defines a color by the amount of cyan, magenta, yellow, and black pigment needed to produce it on paper. CMYK is used for high-quality print work and describes colors more precisely than most monitors can even display.

Color depth
RGB measures each channel from 0 to 255 because that’s the range you get from 8 bits of data, and 8 bits make a byte. The amount of data used to represent a color is called color depth.

Color depth is important in two respects when working with graphics: the color depth of your monitor, and the color depth of the files you use to store your images. Monitor color depth depends on the capacity your display hardware supports and how the software drivers are configured. Your operating system usually provides some sort of control panel to set the display color depth. File color depth depends on the file format that you use to store your graphics.

True color
Since typical RGB uses three 8-bit channels, it adds up to a 24-bit color depth. When available, full 24-bit color is called true color. A true-color monitor displays every pixel’s color exactly. The option often appears as Millions of Colors in monitor settings, because it adds up to 16,777,216 RGB combinations. Likewise, a true-color image file records the full range of colors precisely.

High color
True color allows more hues than the eye can distinguish, so most operating systems offer the option of 16-bit high color (Thousands of Colors on Macintosh). In high color, the monitor actually displays only 32 distinct levels of red, 32 of blue, and 64 of green. The visual difference is almost unnoticeable, but reducing the color depth to 16 bits per pixel boosts video performance. And running your computer system in high color won’t affect your image data; most applications, such as Photoshop or a Web browser, still use the full 24-bit values. The data gets rounded off only when displayed on the monitor. That’s why there are no high-color image file formats.

Indexed color
Older, less powerful computer hardware and certain file formats can handle only 8 bits per pixel. 8 bits can’t hold much information for three channels, so 8-bit environments use indexed color, as shown in Figure C. With indexed color images, the system or image file maintains a color table, or palette, of up to 256 colors. The 8-bit value for each pixel identifies which of those colors to use–the computer equivalent of painting by numbers. Indexed color lets 8-bit displays and images simulate true color, since the palette colors themselves are 24 bits deep.

Figure C

An indexed-color image file contains a palette for the colors it uses, and an 8-bit display has a palette for the colors it can show. Usually a system running in indexed color allows a separate palette for each application, which is why starting, switching, or closing applications may briefly alter the colors that you see on your screen.

Dithering and antialiasing
Applications that create or display graphics often bump up against the limits of the hardware they run on. Images may have more colors than the monitor can show or details too small for the pixels to render. That’s where dithering and antialiasing come in.

Dithering
Monitors and image files limited to 256 colors can create the illusion of more colors by dithering the available hues in a diffuse pattern of pixels, approximating the desired color. Dithering is used by operating systems and display applications, such as Web browsers, running on 8-bit monitors. Image editors use dithering to convert true-color images to indexed colors. Because it can look bad in some situations, most image editors make dithering an option. The alternative to dithering is color substitution, which uses the closest color on the palette. Figure D shows both options.

Figure D

Antialiasing
All computers and printers, regardless of color depth, render pixels in a grid. This creates problems for images that aren’t grid-shaped. The strict division between pixels is called alias, so certain applications use antialiasing to smooth out the image, like the one on the right in Figure E. Antialiasing interpolates colors where they meet, creating the illusion of smooth nonhorizontal or nonvertical boundaries.

Figure E

Antialiased type appears smoother and more legible than pixelated aliased type; antialiased images typically look less blocky and more professional. Image editors usually offer an antialias option for most operations. Just bear in mind that antialiased images tend to require more colors to create the interpolated regions.

Color matching and gamma correction
One problem with the RGB color model is that it measures color relative to the hardware being used at the time. A common complaint among designers–and their clients–is that graphics developed on one platform don’t look the same on another. For example, an image that looks great on a PC may appear pale or washed out on a Macintosh.

The problem is that all monitors are not alike, and it goes deeper than ambient light or the brightness knob. The relation between RGB values and the actual color displayed on the screen is almost never linear. For example, a red channel set to 200 should theoretically be twice as bright as a red channel set to 100, but it usually isn’t. And the actual relation, called gamma, varies from computer to computer, so even if one color matches on two computers, most other colors still won’t.

The images in Figure F simulate the effects of two systems with different gamma values:

Figure F

Color management is a problem with many computer peripherals. It takes built-in color matching (such as ColorSync on the Macintosh) or third-party products (such as the Pantone Matching System) to shepherd colors intact through digital cameras, scanners, and printers. But once an image is on the Web, your only worry is your users’ monitors. The solution there is gamma correction. By including the intended gamma value with an image, you can leave it to individual users’ rendering software to correct it relative to their monitor’s color curve.

Unfortunately, popular image formats don’t support gamma correction. For the most part, the Web has gotten by without gamma correction, but precise colors matter for online companies that want to sell merchandise such as clothing, cosmetics, and paint. And that was part of the impetus behind the Portable Network Graphics (PNG) format, which includes gamma values. The World Wide Web Consortium (W3C) published the final PNG specification back in 1996, but Web browsers and graphics applications have begun to support it only recently.

Raster vs. vector
No, it’s not some ancient Greek family tragedy. When you start working directly with image files, how the image data is recorded determines your options for changing it.

On a computer monitor, images are nothing more than variously colored pixels. Certain kinds of image-file formats record images literally in terms of the pixels to display. These are raster images, and you can edit them only by altering the pixels directly with a bitmap editor. Photoshop and Paint Shop Pro are two of the most popular bitmap editors.

Vector image files record images descriptively, in terms of geometric shapes. These shapes are converted to bitmaps for display on the monitor. Vector images are easier to modify, because the components can be moved, resized, rotated, or deleted independently. PostScript is a popular vector format for printing, but so far Macromedia’s Flash is the closest thing to a standard vector format on the Web. In an attempt to make Flash an industry-wide standard, Macromedia opened its Flash file format in April 1998, making it freely available to content and tools developers. The W3C has produced an XML-based format called Scalable Vector Graphics (SVG), but browsers have yet to widely support it.

This distinction can loom large, for example, when clients or coworkers ask you to alter the text on an image. Chances are the image is stored in a raster formatted image file, so the change won’t be as easy as they think. You’ll have to alter the wording by changing the individual pixels themselves. Keep this in mind when creating images that you might have to modify later. Modern graphics tools let you export a raster version of your image for the Web but also save it in a more componentized proprietary format for later editing.

True vs. Web image formats
Anything stored on a computer or sent over the Internet is in a specific format. Images are no exception, and there are a wide variety of image formats in use today. Your choice of image format is based on a variety of factors, such as whether you plan on editing the image in the future and whether you want the smallest possible image for downloading over the Web, or what image editing tools you have at your disposal.

When you want to save or keep a copy of an image for further editing, you need to pick a format that records the image correctly, without losing any details. These are typically called true image formats. As long as you store your original images in a true image format, you can re-edit them later without losing any quality.

However, true image formats tend to have large file sizes, making them unsuitable for sending over the Internet. For Web images, you want to pick a format that will result in the smallest possible file size. The two most common today are the Graphics Interchange Format (GIF) and the Joint Photographic Experts Group (JPEG). The key is that both of these formats compromise the image for the sake of compression, so you shouldn’t use them to store original artwork that you may want to modify later. (The exception is an image with no more than 256 colors, which can safely be stored as a GIF.) Most image editors offer a Save As or Export command to let you safely create separate GIF or JPEG versions for posting on the Web while saving the original in a true image format.

True image formats
A true image format accurately stores an image for future editing. There are dozens–if not hundreds–of existing true image formats, and picking the right one depends on which editing tools you plan on using, as well as whether you need to share the files with others who might use a different set of tools.

Every major computer operating system has its own native image format. Applications written for a given operating system are almost guaranteed to support that format, so you can play it safe if someone needs the image and you know the platform the person uses. Windows and OS/2 use the BMP format, while Macintosh prefers the PICT format. Unix desktops based on X Windows, such as GNOME, favor XWD files. All of these formats support full 24-bit color but can also compress images with sufficiently few colors into 8-bit, 4-bit, or even 1-bit indexed color images.

Tagged Information File Format (TIFF) is a loss-free, 24-bit color format intended for cross-platform use, and it tends to be accepted by most image editors on most systems. The only drawback is that TIFF has evolved into several incompatible versions, so different image editors may not be able to read each other’s TIFF files. But recent versions of popular applications such as Photoshop and CorelDraw should have no problem.

By far the most promising loss-free format is the Portable Network Graphic (PNG). It accurately compresses 24- or even 32-bit color images, the latter of which are 24-bit images with an added 8-bit alpha, or transparency, channel. It also indexes images with 256 or fewer colors for further compression and supports gamma correction. Best of all, it’s intended to be a Web format. Most recent graphics applications can read or create PNGs, and modern browsers support the format, albeit inconsistently.

Web image format: GIF
CompuServe’s Graphics Interchange Format (GIF) compresses images in two ways. First, it uses something called Lempel-Ziv encoding, which counts rows of like-colored pixels as a single unit. Second, it limits itself to indexed color. This means that a GIF can have no more than 256 colors, so you may have to reduce the colors in your images to use it. That’s why GIF doesn’t work well for photographic or high-color images.

GIFs with sufficiently few colors realize greater compression: 128 or fewer colors are referenced with 7-bit data; 64 or less with 6-bit data; and so on, down to a 1-bit, two-color GIF. This makes GIF an optimal format for simple line art, and that means there are limits and rewards to adding or removing colors. GIF has a few unique features. A GIF file can contain several images, along with a duration value for each one, to produce animation. It also has limited transparency: one color in an image’s palette can be designated as transparent. This is an either/or arrangement; pixels with colors close to the transparent one will not be partially transparent. Figure G shows a GIF and a JPEG of the same image.

Figure G

Web image format: JPEG
The JPEG format supports full 24-bit color. It compresses images by accurately recording the brightness of each pixel but averaging out the hues, which our eyes distinguish less accurately. In effect, it records a description of an image, not the literal composition of that image. The viewer’s Web browser or graphics application decodes this description into a bitmap that looks more or less like the original image.

The accuracy of the reconstructed image depends on how much compression is applied–a value you can choose in most JPEG-savvy graphics tools. The decoded hues are rendered in sample blocks with diffused shapes. Since these blocks tend to overlap, it’s very difficult–and takes a lot of data–to produce a distinct boundary between colors. But this technique works very well for photographic images with gradual color changes and no sharp edges. Tropical birds, for example, are particularly well suited to the JPEG format, as Figure H illustrates.

Figure H

On the down side, JPEGs are notoriously difficult to edit. If you open a JPEG and modify it, you’re modifying the interpreted bitmap rather than the JPEG data itself. Resaving as a JPEG will put the interpreted bitmap, defects and all, back through the encoding process, and the resulting image will be further degraded. Never resave a JPEG if you don’t have to.

One more caveat: For high-quality printing, the JPEG format supports pixel resolutions besides 72 dots per inch (dpi). On the Web, anything over 72dpi is a waste–there’s no benefit to higher resolutions as there is when printing onto paper. When saving an image as a JPEG, be sure to double-check the resolution of the image.

How to scale an image
Making an image bigger or smaller is a relatively simple operation with most image editors. But following a few guidelines can help you get better results.

With raster images–which you use most of the time–scaling up just doesn’t work. Photographic images can grow a bit and still look convincing, but anything else quickly begins to look like a checkerboard. The exceptions are fully aliased images composed entirely of rectangles, which can scale up indefinitely.

When shrinking an image, you’ll want to use an image editor that supports antialiasing, such as Photoshop or Paint Shop Pro. (Microsoft Paint–the image program built into Windows–does scaling, but it retains alias.) With antialiasing, the smaller version will still look like the original despite working with fewer pixels. In fact, scaling down is the easiest way to smooth out a jagged image.

Finally, before you scale anything, make sure that the image is in true color. A common mistake is to scale down an indexed-color image. Because not enough colors are available to antialias properly, the results look terrible. Switching to true color solves this problem. Look for RGB, 24-Bit, or Millions Of Colors in the menus of your image editor.

How to add transparency
Most image editors offer the option of transparency, also referred to as a mask or alpha channel. Transparency lets an image be displayed on a Web page with the page’s background showing through the transparent parts of the image.

The current Portable Network Graphics (PNG) format includes a full 8-bit alpha channel, with 256 gradations of transparency, to sit alongside the RGB channels. The current Web formats can’t match that, but GIF does have the equivalent of a 1-bit alpha channel: You can specify a single color on the palette that should be rendered completely transparent.

To give a GIF transparency, don’t bother with the direct transparency or masking offered within most image editors. They seldom take transparency into account when exporting a GIF, and it’s of little use given a GIF’s all-or-nothing capability. Instead, make sure the areas that you want transparent are all of a single color and that you don’t need that color to be visible anywhere in the image. You may have to change the portions you want transparent to a new color , taking care to stay within the total 256-color limit.

Your image editor should offer the option of picking a color to declare transparent in the Save As or Export options, on an Optimization panel, or in a control or menu marked Palette or Color Table. Select the color that you want, and you should get a GIF with the appropriate areas transparent.

Pick a background color
If the visible part of your GIF has antialiased edges, make sure that its background is the same basic color as the background of the Web page where it will appear. The original background is interpolated into the antialiased region, so if the backgrounds don’t match, you end up with a thin visible border of the original background color around your image, as you can see in the image on the right in Figure I.

Figure I

Some very old browsers and non-Web applications don’t support GIF transparency, and these applications will display the selected color. If you’re a stickler for backwards-compatibility, or expect the same GIF file to be used in other applications, make sure that the transparent color looks acceptable when visible.

How to reduce colors
If you want to save a full-color image as a GIF or make an existing GIF smaller, you’ll need to reduce the colors. Any image editor capable of saving GIFs will have a mechanism for color reduction; look for an Optimization panel or check the menus for Indexed Color, Reduce Colors, 256 Colors, or 8-Bit.

You’ll typically have a few additional options at this point. One is dithering the image. However, unless you’re being forced to make a GIF from a photograph, this is generally not a good idea. Dithering makes images more complex, resulting in a larger file size.

Another option is to reduce the image’s color palette; the fewer colors it has, the smaller its file size. Try different bit depths (256 colors, 128, 64, 32, and so on)–with Undo commands between them–to find the smallest palette that still delivers acceptable image quality. Figure J shows the results of reducing bit depths incrementally.

Figure J

You can do a few more things to improve the appearance of the reduced image. First, reduce the bit depth gradually–going from 256 colors to 128 to 64 to 32 can produce better results than going straight to 32 colors.

Next, after reducing the image almost as far as you want, you can guide it the rest of the way by editing the palette yourself (look for Palette or Color Table in your image editor’s panels or menus). Find similar colors that don’t need to be differentiated, such as multiple shades of off-white or near-black. Modern tools let you delete selected colors from the palette. If you don’t have that option, change the similar colors to identical values, then switch the image into RGB mode and back into indexed color. The duplicate palette entries should be replaced by a single entry.

Web-safe colors
An important consideration when dealing with Web graphics is the Web-safe palette. This was Netscape’s clever solution to the problem of simultaneously displaying several GIFs with different indexed color palettes on a screen with an 8-bit color display. The browser imposes a single palette on all of the images, dithering or substituting based on the user’s preferences. To make the single palette equally usable by all the images, it consists of colors that use six equal gradations in each RGB channel: 0, 51, 102, 153, 204, and 255 (which you’ll often see in HTML as the hexidecimal values 33, 66, 99, CC, and FF). The resulting 216 colors compose the Web-safe palette. By producing images mainly or entirely from those 216 colors, you can be sure the images undergo little or no alteration on 8-bit screens and look more or less the same everywhere they appear.

Most image editors offer the Web-safe palette (also called the Netscape palette) in their color-reduction mechanisms. In Photoshop 3.0, which preceded this trend, you can derive the Netscape palette by entering 216 colors and selecting Uniform. This will get you the entire palette, so switch to RGB mode and back (this time selecting the Exact palette) to flush out the unused colors.

How to take a screenshot
There will be occasions when you want to capture what’s on your computer screen and put it in an image file. Unless the entire screen contains only a very few colors, try to take the screenshot on a computer with a high-color or true-color display. This is especially applicable when you’re capturing a Web browser, as browsers frequently dither or substitute colors when running on an 8-bit display. If you have no choice but to grab a screen in 256 colors, at least turn off dithering.

In Windows, you have two options. Press the Print Screen (or PrtScn) key on your keyboard to copy the entire screen to the clipboard. Press Alt-Print Screen to copy only the active window. Next you’ll need to open an image editor (Microsoft Paint, which comes with Windows, is fine if you don’t plan on doing any fancy editing), create a new file, and select Paste from the Edit menu.

You have more choices on a Macintosh. Pressing Command-Shift-3 creates a PICT file of the entire screen in the top directory of your boot drive. Press Command-Shift-4 to change the cursor to a cross, which you can click and drag to select an area of the screen to capture in a PICT file. The same combination with Caps Lock activated changes the cursor to a circle; click a window with the circle to create a PICT of that window. Adding the Control key to any of these combinations copies the screen image to the clipboard.

For X Window desktops such as GNOME and KDE, the command xwd -out filename.xwd lets you click a window to make an XWD image of it. Adding the -frame option will capture the entire window manager. The popular utility xv also does screen captures, and KDE comes with the utility ksnapshot.

Finally, if you plan to edit the screenshot before using it on your Web site or elsewhere, be sure to save it in a true image format. Don’t make the screenshot endure GIF reduction or JPEG encoding twice.

How to modify a GIF
When you need to add something to a GIF image–say, an outline or your company logo–it’s often difficult to get the exact color that you want. Even after you adjust your image editor’s color picker to the tone you want, it might give you another.

This problem comes up because the image editor sticks to the GIF’s color palette and you’re trying to use a color that isn’t in the palette. The solution is to open the GIF and change it to true color (RGB). Now you’ll have access to any color you want. After you’ve modified the image, reduce it back to 8-bit or lower so that you can resave it as a GIF.

Even if you don’t need to add new colors, watch to see if your modifications remove any colors, especially if you crop the GIF. Because every color removed from the palette helps shrink the file size–especially if it reduces the bit depth–take the opportunity to have your image editor recount the colors. Some image editors require you to switch to true color first, but when you go back to indexed color the palette may be smaller.

You can avoid these issues if you just want to replace one color with another. With the GIF still in indexed color mode, open the palette (look for Palette or Color Table in your image editor’s menus) and click the color that you want to change. Enter the RGB values for the new color, then close the palette. Every pixel that was in the old color will now be in the new one.

How to resave a JPEG
You should export an image as a JPEG only once, because once you export, you’re working with a compressed imitation of the original. The proper procedure for editing a JPEG is to modify the original image and then re-export it as a JPEG.

But sometimes you don’t have a choice: you may have lost the original file or never had it to begin with. For example, some clip art vendors use the JPEG format to pack more images onto a disc. When you’re stuck, there are some tricks you can use to ease the pain. With moderately to highly compressed JPEGs, or with images that have already been resaved, the main problem is eliminating the subtle defects, or artifacts, created by JPEG encoding.

One trick is simply to shrink the image a little. Assuming your editor has antialiasing, many of the artifacts will get interpolated away.

If you don’t want to scale down the image, you can get help from filters. Most good image editors list them as Filters or Effects in the menus. A Blur or Unsharpen filter can be helpful here, especially if it has adjustable settings. Mildly blurring the whole image can make the artifacts less noticeable when the JPEG is re-encoded. Other filters that may work include Despeckle, Reduce Noise, and Remove Dust And Scratches. By weeding out tiny imperfections, which the computer can see much better than you can, these filters can eliminate JPEG artifacts directly. Experiment to find which one works for your image–but keep the Undo command handy!

When you’re done altering the image and you’re ready to resave the JPEG, be sure to also save the image in a true format so that you don’t ever have to re-encode it again.