Section 5.1. Comparing Image File Types

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.

Table 5-1. Web image types

File type	Pronounced	Stands for	Palette?	Transparency?	Animation?
GIF	jiff or giff	Graphical Interchange Format	Yes, up to 256 colors	Yes, one level of transparency	Yes
JPEG	jaypeg	Joint Photography Experts Group	No	No	No
PNG	ping	Portable Network Graphics	Yes, up to 256 colors	Yes, multiple levels of transparency	No

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.

TECHTALK

The Graphical Interchange Format (GIF) image type works well with images that have large areas of flat color.

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.

TECHTALK

The palette in a GIF or PNG image is a built-in color chart of up to 256 colors. The computer uses these colors to display that particular GIF or PNG image file.

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.

BEHIND THE SCENES

Many graphics editors allow you to choose more than one color in the palette to be transparent in a transparent GIF. What happens is that, when you save or export the image in GIF format, the graphics software converts all the transparent colors to a single transparent color slot.

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.

TECHTALK

In a transparent GIF, all the pixels of a particular color in the palette become transparent or see-through.

Figure 5-1. Transparent GIFs can be placed against any background

TIP

The see-through region in a transparent GIF works best when it's square or rectangular in shape. The computer can't blend the edges of curved shapes with varying degrees of transparency, which often leaves you with visibly jagged edges.

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.

Figure 5-2. The individual frames of a single animated GIF image

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.

TECHTALK

An animated GIF contains two or more separate images or frames. The computer displays each frame in turn, creating the illusion of motion.

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.

TECHTALK

The Joint Photography Experts Group (JPEG) format works well with photos and other images with a wide range of color or shading.

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.

TECHTALK

The Portable Network Graphics (PNG) format, like the GIF format, works well with large areas of flat color.

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.

BEHIND THE SCENES

PNG images come in two main types. The 8-bit PNG (or PNG-8) is probably the most common format for the Web, and it's the type to which the general discussion in this chapter applies. The 24-bit PNG (or PNG-24) supports millions of colors, making it a suitable format for photographs and the like, although PNG-24s tend to weigh more than JPEGs.

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.

Figure 5-3. This transparent PNG image is 50% transparent

TIP

Macromedia Fireworks uses PNG as its default "save type" or production format. If you create your web graphics in Fireworks, you have to be careful about which PNG images you post on your site. You want the final, web-optimized PNGs that you get when you export your images, not the production PNGs that you save as multilayered works-in-progress. To avoid this issue entirely, simply use the GIF format for your web images, and reserve PNG for your designer-only production files.

TECHTALK

Alpha channel transparency gives a transparent PNG its range of opacity.