Dreamweaver 8 Design and Construction (OReilly Digital Studio)

5.1. Comparing Image File Types

Image files come in dozens of formats, but for the Web, you work with just three of them, all from the raster or pixel-based category. These are the GIF, JPEG, and PNG formats (see Table 5-1). All the major browsers support them, so you don't have to worry about compatibility. Some browsers support other image types as well. Internet Explorer displays Windows bitmaps (BMP), for instance, while the other browsers don't, so it's a good idea to stick with the big three.

Oftentimes, an image that you want to use for your web site exists in some other format. You might have a piece of Windows clip art (Windows Metafile Format or WMF), some corporate branding from your friends in the marketing department (Electronic PostScript or EPS format), or high-quality images for print publishing (Tagged Image File Format or TIFF). If so, you should open the original images in your graphics software and save copies as GIFs, JPEGs, or PNGs. Don't post the images in their original format, or your visitors won't be able to see them.

To determine which format to use, it's helpful to consider the content of the image. In general, images with a lot of color information work better as JPEGs, while images with just a few colors work well as GIFs or PNGs.

5.1.1. About GIF

Graphical Interchange Format (GIF) images tend to work best with line art, cartoons, charts, graphs, logos, and other images that have large areas of flat color. Images like photographs, which often have subtle gradations in tone and shading, don't usually work well in the GIF type.

The reason? GIF images come with a built-in palette or color chart of up to 256 colors. The computer uses these colors to display the image file. It doesn't matter which 256they can be 256 shades of red. You just can't have more than 256 colors total in the image.

This might seem like a lot of colors, yet it's next to nothing when you consider that most computers are capable of displaying some 16 million colors, more than the human eye can distinguish accurately. Photographs and the like burn through those 256 color slots in a hurry. To keep within the limits of the palette, your graphics software converts similar colors to the same basic shade, and you lose the subtle tonal shifts. As a result, photos take on a blocky or grainy aspect in GIF format.

Still, a 256-color palette is often more than sufficient for non-photographic images. As long as you stay away from shadow effects and gradient fills, your navigation buttons and other interface elements work well as GIFs.

When you create a GIF in your graphics software, you can select one of the color slots in the palette to be a transparent color, which gives you a transparent GIF (see Figure 5-1). In a transparent GIF, all the pixels of this particular color become see-through. Place a transparent GIF on your web page, and the background color of the page shows through the transparent pixels. Web designers often use transparent GIFs for button images that need to appear against various backgrounds. Instead of creating separate image files with the same button on several different background colors, you make one button with a transparent background color. In Figure 5-1, because the background color of the GIF image was marked transparent in the graphics software, you can place it against any background.

The GIF format also supports animation. Animated GIFs are like those flipbook animations you used to draw on the corners of the pages in your high school math text, in that they contain several separate images or frames (see Figure 5-2). The computer displays each frame in turn, which creates the illusion of motion. The great thing about animated GIFs is that they're viewable in the browser without any kind of plug-in. Post them on your page, and your visitors don't require any special software to see the animation. The GIF image in Figure 5-2 contains four separate frames, which are played in sequence to get animation.

To create animated GIFs, you need the right software. Not every image editor provides tools for assembling them, but the better packages like Macromedia Fireworks do.

5.1.2. About JPEG

The Joint Photography Experts Group (JPEG) format does especially well with photographs, movie stills, and all other images with a wide range of color or shading. Unlike GIFs and PNGs, JPEG images don't have a built-in color palette. Instead, these images pull from the same set of colors that the visitor's computer is capable of displaying, so you get the full crayon box of 16 million options.

Because JPEGs don't have a color palette, you can't specify a transparent color. Also, unlike GIF, the JPEG format doesn't have frames, so you don't get animation.

5.1.3. About PNG

The Portable Network Graphics (PNG) format originated as a non-proprietary alternative to GIF, which CompuServe used to own. The patent on GIF has since expired, and with it went much of the incentive to convert the Web from GIF to PNG.

PNG images are very much like GIFs (although they tend to weigh less than GIFs, which is a definite advantage). They have a built-in palette of 256 colors, so they work well for images with large areas of flat color. Use them for the same types of images that make sense as GIFs, with the exception of animations, which PNG doesn't offer.

On the other hand, PNG does give you transparency, and it's a great improvement over the GIF version. In a transparent GIF, you get one level of transparency for one color, so pixels are either completely transparent or completely opaque. With a transparent PNG, in addition to GIF-style, single-color transparency, you also get alpha channel transparency, which comes by degrees, and it applies to all the colors in your image, not just one. Your entire image can be 50% opaque, for example, which means that the image is only 50% transparent and therefore still partially visible on screen (see Figure 5-3). In Macromedia Fireworks and other image editors, you can set the alpha channel of a transparent PNG from 0% (completely transparent) to 100% (completely opaque).

Unfortunately, PNG images with alpha channel transparency appear as regular, non-transparent images in Internet Explorer, which is another major strike against the PNG format. If you want to use transparent PNGs, go with the single-color variety, which IE displays correctly.