About Images for the Web

Now let's look at those six factors that you should keep in mind as you create Web images.

Format

People who print images on paper don't have to worry about what their readers will use to look at the images. You do. The Web is accessed every day by millions of Macs, Windows-based PCs, Unix machines, and other kinds of computers. The graphics you use in your Web page should be in a format that each of these operating systems can recognize. Presently, the two most widely used formats on the Web are GIF and JPEG, with PNG gaining in popularity. Current browsers can view all three image formats.

Figure 5.1. Logotypes and other computer-generated images or images with few colors are compressed efficiently with LZW and thus are often saved in GIF format.

Color

Currently (mid 2006), around 80% of the Web surfing public use 24- or 32-bit monitors, 16% use 16-bit monitors, and fewer than 1% use 8-bit monitors. In 2002, those numbers were quite different: 50% on 24-bit, 40% on 16-bit and 10% on 8-bit. The trend is clearly toward so-called "True Color" monitors in which any of 16 million colors can be displayed.

In the days when 8-bit monitors were the norm, you had to restrict yourself to only the browser safe colors in order to ensure that the colors you chose would appear correctly on your Web pages. However, as the numbers show, so few people are using 8-bit monitors, that it is no longer an issue. You may use any colors you like. (If you're interested in the whys and wherefores of browser safe colors, I have maintained some information about them on my Web site.)

Check the inside back cover of this book for a handy table for choosing colors.

Figure 5.2. Full-color photographs and other naturally created images, or images with more than 256 colors, should be saved in JPEG format.

Size and Resolution

Digital images are measured in pixels. A 4 megapixel digital camera can take pictures that are 1600 pixels wide by 1200 pixels high. How big is that? It depends. If you print the image to a printer at 200 ppi (pixels per inch), it will measure 8 by 6 inches. But if you're using that page on the Web, the image's size will depend on your visitor's monitor's resolution, which is more likely to be around 86 ppi (and might be as low as 72 or as high as 100 or so), and thus will display as big as 18 x 14 inches (about 46 x 36 cm). Too big.

Figure 5.3. This particular image is 1704 pixels wide and in Photoshop has an output resolution of 284 ppi and only measures 6 x 8 inches. Here in Firefox, its resolution is determined by the visitor's monitorabout 86ppiwhich means the picture is 20 inches wide!

Perhaps a better way to think of image size is with respect to the average Web page. Since monitors with a resolution of 640 pixels wide by 480 pixels high were the standard for so long, Web page designers got used to keeping their pages around 600 pixels wide, so that viewers could see the entire contents of the page without scrolling horizontally.

While it's true that there are more and more people who have bigger monitors (these days more than half are 1024 x 768), it doesn't necessarily follow that folks will fill up those bigger monitors with a single browser window. Aside from having other programs to consult (or even other browser windows), it's cumbersome to read text in a browser that's too wide. Still, designers have tended to widen their designs as well as use flexible-width designs that expand and contract with a visitor's browser window. Keep this in mind as you plan and create your images.

Note that resolution can mean one of two quite distinct concepts: the actual number of pixels on a monitor or in an image, say 640 x 480, or the number of pixels in an inch of that monitor or image, say 72 or 86 ppi. Regardless, the higher the resolution, the more pixels. On paper, pixels can add details or size. On screen, more pixels always translate to a bigger size image.

Figure 5.4. This image also measures 6 x 8 inches in Photoshop, though it has an output resolution of 50ppi. Again, however, these relative measurements are irrelevant. What counts is that it measures 300 pixels wide, which is about half the width of an average browser window.

Speed

The next principal difference between Web images and printed images is that your visitors have to wait for Web images to download. (Imagine waiting for pictures to appear in your morning paper!)

How can you keep download time to a minimum? The easiest way is to use small images. The larger an image's file size, the longer it takes to appear before your visitors' eyes.

The second way to speed up download time is by compressing the image. There are three popular compression methods (that correspond to the three major formats): LZW (for GIF images), JPEG, and PNG. LZW is particularly effective for computer-generated art like logos, rendered text, and other images that have large areas of a single color. In fact, if you can reduce the number of colors in an image, LZW can often (but not always) compress the image even more. JPEG, on the other hand, is better at compressing photographs and other images that have many different colors.

Each method has its drawbacks. Because LZW used to be patented (until 2004), developers had to pay royalties on software that used it. (This is one of the principal reasons that PNG was developed.) And GIF images are limited to 256 colors. JPEG has two main disadvantages. First, its compression information takes up a lot of space and is simply not worth it for very small images. Second, it is lossy compressionpermanently eliminating details in order to save space. Uncompressing the image will not restore the lost data. If you plan on editing an image in the future you should save a copy in an uncompressed format (e.g., PSD or TIFF) and only save it as a JPEG after you have made your final edits.

PNG compresses better than LZW without losing information like JPEG. However, it does not allow animation, as GIF does. It used to have limited support in browsers, but current browsers, including IE 6 and up, Firefox, and Safari display PNG images just fine. (However, Internet Explorer doesn't display PNG images with Alpha channels properly.)

Transparency

Transparency is important for two reasons. First, you can use it to create complex layouts by making one image move behind another. Second, you can take advantage of transparency to give an image a non-rectangular outline, adding visual interest to your pages. Both GIF and PNG allow transparency; JPEG does not.

Animation

One thing you won't be seeing on paper anytime soon are moving images. On the Web, they're everywhere. Animated images can be saved in GIF format, but not JPEG or PNG. You can also create animation with Flash (see page 436).