PREPARING IMAGES FOR THE WEB

If Photoshop and ImageReady have the same toolsand both can save images in GIF, JPEG, and PNG formatshow do you know when to use which one? If you're just dealing with one picture, you can use either. If you want to optimize several pictures so that they display well while using as little memory as possible, use ImageReady to do the optimization. You can edit, apply filters and type, and color correct in either program. Obviously, if you're going to be designing animations or using rollovers and slices, or any other kind of motion graphics, you have to do them in ImageReady.

The first thing you need to learn about preparing web graphics is the type of file format to use. File formats for web use are optimized in one of several ways to make the file as small as possible without losing detail in the image or having colors turn blotchy instead of making the smooth continuous transitions that we expect to see in a photograph. As you learned earlier, there are two standard choices: GIF and JPEG. The third format, PNG, has been out for several years and promised to be the best choice of all three, but it never really caught on.

File Optimization and Compression

File compression means to save the file by making it as small as possible. For saving and archiving documents, you're probably already familiar with such compression programs as Allume StuffIt and PKZiP. Compression works on text by surveying the document for frequently used combinations of letters and substituting a single character for a group. Let's look at a quick example: "These three trees are beeches." Looking for recurring patterns, you see "th" and substitute *. The pattern "ee" becomes !, and "es" becomes @. So, you get *@e *r! tr!s are b!ch@. By simply substituting a single character for each common group of two or three letters, you go from 25 letters to 18. That's better than a 28% drop, and well worth doing when storage space or transmission time is an issue. Obviously a file that's 50% compressed sends from one computer to another twice as fast. Similarly, compressing JPEG graphics works by looking at adjacent pixels on the screen and finding averages in each group. This works great the first time you do it. But, as in the text example, you lose half of your data. When the program that's uncompressing the file puts the averaged pixels on the screen, you lose some color data. The transitions from one group of averaged pixels to the next isn't as smooth, and you also lose some contrast because blacks and whites are averaged into grays. If you again save as a JPEG, you lose more data and more contrast, and soon the image starts to look like a bad photocopy. You could turn a spotted Dalmatian dog or a leopard into a gray or beige animal with enough saves. (That's why it's called the lossy compression methodit loses data each time it's applied.)

Optimization is the process of minimizing file size while protecting image quality. It's sort of a two-way street. As the file gets smaller, which is good, it gets harder to see, which is bad. Smaller files download from the web server to the visitor's computer faster, so they display onscreen quicker. The more quickly the image displays, the less disruption for the site's visitor. The balance between file size and image quality is not an exact sciencethere is no specific formula for optimization.

Remember that Photoshop and ImageReady are designed to create graphics, not to produce web pages. Although it is certainly possible to produce rudimentary web pages using only Photoshop and ImageReady, they are not web development tools. Use Adobe GoLive instead.

Files optimized for web display are stripped of nonessential data. Image previews and custom icons, for example, are not saved with the file. Such data is not visible over the web and serves to increase file size, thus slowing download time.

Lossy versus Lossless Compression

JPEG files use the lossy compression scheme. Image data is discarded to reduce file size and is re-created to display the image. The more data that is thrown away, the smaller the file size. However, the more information that must be re-created, the more likely the image quality will be degraded. When a JPEG image is opened onscreen (or printed), the pixels that were deleted during compression must be restored. Because the exact color of the missing pixels is not recorded, the JPEG process estimates their color, based on surrounding pixels. The more pixels that must be re-created, the fewer original pixels that are available from which to estimate.

GIF and PNG (both 8-bit and 24-bit) use lossless compression. The data is compressed without discarding any, so the image can be rebuilt as it was. GIFs rely on a limited color table, with no more than 256 different colors. It's ideal for line art and pictures with large areas of flat color. It's not capable of showing subtle differences or continuous tones, so it's not very good for photography. GIF and PNG-8 file size can be further minimized by reducing the actual number of colors recorded in the file. If you have a piece of line art that uses only black, red, and green, for instance, you can limit the GIF color table to three colors and lose nothing. PNG-24 has no such color table option.

The Role of the Web Browser

A web page typically consists of both text and images, laid out with HTML tags so that the page can be displayed on the viewer's computer. You use a web browser to translate that HTML and re-create the page on your screen. The HTML file contains the page's text and tells the browser where to find the images on the web server. Some of the more popular web browsers are Microsoft Internet Explorer, Apple Safari, Netscape Navigator, and Opera. They, and most of the lesser-used browsers, can interpret HTML and similar languages natively and can use plug-ins for additional capabilities (such as Scalable Vector Graphics and Java). Without the web browser, the page can't be downloaded and displayed. (However, numerous programs, including some word processors, can display a web page if you download it and save it to your hard drive.)

Remember, too, that cellular telephones and personal digital assistants (PDAs) can access the Internet. PDAs typically use wireless connections and have limited color capability. Although older cell phones are limited to 1-bit colorthey can display only black and white (or black and gray or green)the newer color cell phone displays are very common. If your intended viewers will access your website with cell phones or PDAs, plan accordingly. Use fewer colors, make sure your text and background have good contrast, and "think small" (consider the size of a PDA screen). If possible, check your page with a cell phone as soon as you post it, so you can see what might need to be changed.

Color Modes on the Web

Most modern web browsers (and HTML) support bitmap (black and white), grayscale, indexed color, and RGB modes. CMYK is a print mode and can't be displayed on a monitor; therefore, it can't be used for web work. Indexed color and grayscale images contain a maximum of 256 different colors or shades of gray. RGB images can have millions of subtly different colors in a single image. Because less color information per pixel is required in indexed color mode, an image of the same pixel dimensions is typically smaller and displays more quickly in a web browser because it downloads faster.

Indexed color mode is appropriate for web graphics that have few colors or large areas of solid color or transparency and for any image smaller than 256 pixels. RGB mode is better suited to capture and present the fine gradations of color typically found in photographs.