By James Hinshaw, Austen, Texas, 1-512-347-3504, hinshaw@pbworld.com

Inserting digital images into documents and presentations has become commonplace in the business world. Digital cameras and computer hardware and software have made it so that the average computer user has access to all the tools of a professional darkroom and print shop on a desktop. Technology can be wonderful, but it can be awful at the same time. Many brilliant people have tried their hand at desktop publishing and come out of the experience feeling about as smart as a box full of rocks. If you have ever found yourself scratching your head and wondering why your graphics looked so bad, this article is for you!

The Basics

If you’ve ever heard a rocket scientist talk, you’ll understand that certain terms and acronyms need to be defined before the layperson can understand what the heck they’re talking about. The same is true of computer graphics. The box on the following page features a brief glossary of terms that you will need to understand before delving further into the article.

Now let’s get down to some case studies about how graphics get used and abused. Names of the people mentioned have been changed to protect the guilty.

The Case of Memory and File Corruption

Linda came to me a while back with a problem. Her Microsoft Word file was so large that it caused memory and file corruption problems. Because text files are relatively small, my suspicions were immediately directed toward the graphics she had inserted into her text. MS Word embedding graphics into documents is something like water being put into a sponge. Linda had several images that had been exported from GIS. From talking with the GIS operator I learned that the files were exported as JPEG files at 11 inches by 17 inches (275 mm by 425 mm) and a resolution of 300 ppi. When JPEG compressed, each image file was nearly 1 megabyte in size. Because the GIS images were composed of large blocks of color and sharp lines, they were good candidates for the GIF file format. When converted to GIF, the file size was reduced to only 150 K each without loss of image quality.
Lesson One: Proper file format can achieve significant file size reduction.

Linda had scaled down the images in her document to fit onto a single letter-sized page with room for headers and footers. The final printed size of each image was 7 inches (175 mm) in height. I went back to the original images and reduced them to 7 inches and reconverted them to GIF format. The resulting file size was only 43 K. Lesson Two: With raster images, size counts! A 2-inch-square (50-mm2 ) graphic has four times as many pixels as a 1-inch-square (25-mm2) graphic. Each of those pixels adds to the file size.

We weren’t finished yet. Linda’s graphics still had a resolution of 300 ppi. She told me that her final document was going to be printed on a color laser printer. I have spent years looking at color laser prints, and I can’t see any difference between a 300 ppi image and 150 ppi image. There is a big difference in file size, however. Just in case I need a trip to the eye doctor, I usually recommend a minimum image resolution of 200 ppi for color laser prints. When we reduced the resolution of Linda’s images, we got a final file size of about 26 K each. Lesson Three: Fit the image resolution to the intended output device.

Keep in mind that 300 ppi is the minimum resolution for offset printing. If you intend to have the final document offset printed, you need to retain that higher resolution. Once we optimized Linda’s graphics to best fit her specific need, her Word file took up much less memory and no longer behaved in a sluggish and unstable manner.

Glossary of Terms Figure1 Figure2 Figure3 Figure 4 Figure 5 Figure 6 Vector graphics: These are characterized by smooth lines and solid color fills. Also known as object oriented graphics, they are typically generated in drawing or CADD software, which uses geometric formulas to render objects for the computer screen and printer. They can be enlarged to any scale without loss of image quality (Figure 1), and file sizes remain small. Raster image graphics: Also known as bitmapped images, these are made up of pixels (Figure 2). They are best suited for rendering the subtle variations in tone and color typically found in photographs. Bitmaps store the red-green-blue (RGB) value of each pixel separately, so file sizes for raster images can become quite large. Pixels: Short for picture elements, these are tiny square dots that are aligned on a grid to form a picture. Pixels have various depths of color information called bits (Figure 3). A one-bit pixel has two possible values, either black or white. A 24-bit pixel has roughly 16 million possible values and represents what is considered as true color on an RGB monitor. Pixel depth also affects file size. Resolution: The density of pixels in a raster image is called resolution. Raster images are made up of columns of pixels, and pixels per inch (ppi) is a measurement that refers to the number of pixels in a 1-inch (25-mm) -long column. The number of pixels in an image remains constant, even when scaled to a larger or smaller size. If you stretched an image that was one inch square at 300 ppi, to two inches square, the resulting image would have a resolution of 150 ppi. All other factors being equal, a higher resolution graphic will result in a higher quality image when printed. There are limits to what printers can reproduce and the human eye can perceive, however, so there is a risk of overkill. One must decide in advance of working with an image what the most efficient resolution for the intended output will be. Image compression: This term refers to schemes developed to compress the very large file sizes of raster images. Some, such as Zip and LZW, involve consolidating the programming code and do not degrade image quality. Other schemes, which are discussed below, trade off image quality for greater amounts of compression and small file sizes. JPEG: This is the acronym for Joint Photographic Experts Group, the committee that wrote the standard. JPEG compression stores the difference between the values of adjacent pixels. Because the differences tend to be slight, the format has the ability to store less information, resulting in smaller file sizes. JPEG is great for compressing images with continuous tones and smooth variations of color typical in photographs, and it allows for escalating levels of compression. As the level of compression increases, more detail is sacrificed (Figure 4). Repeated saving of JPEG compressed images can add to image loss. GIF: Graphic Interchange Format (GIF), pronounced “jif,” assigns each pixel one of up to 256 colors—far fewer than the 16 million possible colors that make up what is considered to be “true color” on a computer. Dgital photographs suffer quality loss as a result of GIF conversion. GIF is very good for reproducing graphics with large areas of flat color and sharp lines, such as those that might be exported from vector graphics programs. GIF stores repeating pixel color ranges. Images with large blocks of exactly the same color can be expressed easily. Advantages of the GIF format are that it can support limited transparency and flip-book type animation. TIFF: Tagged Image File Format (TIFF) has a large capacity for color and file information, but usually results in large file sizes. Recent versions of PowerPoint are supposed to be able to display TIFF files with transparent backgrounds, but my experience is that it doesn’t work very well. Usage of TIFF, like GIF, is widespread, but on the decline. PNG: Pronounced “ping” and short for Portable Network Graphic, this format was introduced in 1996 as a replacement for GIF and TIFF, and has attributes of both. PNG compression is 15 percent to 25 percent better than GIF with no loss of image quality. PNG supports variable transparency, yet still allows special effects, such as a soft drop shadows that will blend into any background (Figure 6). PNG does not support animation but has a sister format called MNG that does.

The Case of the Fuzzy Graphic

The other day Dave came to me with the exact opposite problem. Dave had a PowerPoint slide that he was trying to plot out as a 30 inch x 40 inch (750 mm by 1000 mm) presentation board. He was enlarging the slide by more than 400 percent—something that is no problem for vector graphics, but a big-time problem for raster images. Dave wondered why the client’s logo was printing out so “fuzzy.” In this case, the size and resolution of the graphic were much too small for his purpose. To compound the problem, he had copied the logo from the client’s Internet site.

Folks, I hate to tell you this, but Internet graphics just are not made for printing. The do not have high enough resolution, and the file compression schemes used to make the file load quickly can drastically reduce image quality. The logo looked decent on the computer screen because computer screens have low image resolution, typically 96 ppi. If you have a graphic that you want to display only on a computer screen or a projector using PowerPoint, any image resolution over 96 or 100 ppi is inefficient. Higher resolution is wasted because the screen cannot display it, yet the larger file size gets absorbed into your PowerPoint file.

We solved Dave’s problem by contacting the client and asking for a vector or high resolution logo file.
Lesson Four: Graphics should be optimized in format and size to fit each specific purpose.

If the same logo is needed for different uses, say a Web page and a billboard, you will need multiple file versions that are created to fit each need.

Changing File Formats

A final story. Not long ago I received an e-mail from Cathy, who wanted me to put her project logo into a PowerPoint presentation. She had attached a JPEG file of the logo to the e-mail. Now, inserting a JPEG into PowerPoint is not a problem, but Cathy wanted the logo to appear without the white background box and needed it to stand out from the background image. JPEG format does not support transparency, yet images import in rectangular shape, so any odd shape such as text will appear with a default white background.

PowerPoint has a tool to delete this white background (it’s located in the Picture menu, and the icon looks like an Xacto knife), but it eliminates only one color. If there are very similar colors, such as light gray, or if there is the same color in a vital part of the graphic, the results can be poor with a jagged halo of light-colored pixels around the graphic and holes in the image. Maybe the solution was to change the graphic to GIF format because it supports transparency. With the proper software, you can designate a color from a GIF color palette to display as transparent. GIF has the same problems as the knife tool in PowerPoint, however, so it was not the best solution.

I turned to the PNG format. This has been one of my favorite file formats for years, but many software applications have been slow to adopt it. Older versions of Photoshop don’t write PNG files well, but Adobe has embraced the format in the latest versions of Illustrator and Photoshop using it as the default export method for graphics destined for Microsoft Office products.

In this particular case I turned to Macromedia Fireworks software, which has PNG as its native format. I carefully used the eraser tool to eliminate the background. The software then generated a mask (called an alpha channel) to preserve the background transparency when the file was imported into other software programs. Because PNG supports variable transparency, an image can fade from opaque to transparent in a smooth transition. This capacity allowed me to add a drop shadow effect in Fireworks that looked great on any color background. The resulting file inserted into PowerPoint beautifully. Lesson Five: There may be more than one way to tackle a problem, but there is usually a best way.

Image Editing Software Options

It’s one thing to talk about the advantages of these different formats and image resolutions, but you have to have some kind of image editing tool to do anything about it. There are several low-cost image editing software applications on the market today. Many of them have free trial software available for download over the Internet. In some instances, versions of the software are bundled with digital cameras or computers. These applications include the following:

• Adobe Photoshop is the industry standard image editing software, but at $649, it may be too expensive for the average computer user. Adobe does market a lite version of Photoshop called Photoshop Elements that retains the core of the Photoshop application and sells for only $99.
• Corel Paint, priced at $299 is another option, but it is geared more towards emulating various traditional painting mediums, such as oil on canvas.
• Macromedia Fireworks produces the best PNG graphics I have seen. As with other Macromedia products, Fireworks is heavily geared toward Web graphics, and the Web features may cause confusion for non-Web-savvy users. Fireworks sells for $299.
• JASC Software sells PaintShop Pro. This $109 program is an excellent, low-cost alternative to Photoshop.

Last Words