Use JPEG for Photos

If you are planning to use photos on your Web page, GIF is not your best option. The reason, again, is compression. A photograph generally has a much broader range of color varieties and shades, which makes it unsuitable for GIF’s method of compression. Instead, you need to use the JPEG ( Joint Photographic Experts Group, pronounced jay-peg) format. Instead of inventorying pixels, as GIF does, JPEG uses a more complicated process that compresses an image by removing colors from parts of the photo where they are least likely to be missed.

Look to the Future with PNG

PNG (pronounced ping ), stands for Portable Network Graphics. It was developed in response to the controversy over the licensing fee being charged for the GIF compression program and looks to be a very promising format for the future. PNG combines some of the best qualities of both GIF and JPEG; however, older browsers don’t support it. Thus, if you are concerned about your images being available to everyone who visits your site, you might want to stick with GIF and JPEG for a while.

Learn Key Terms

Whenever you are dealing with images and image-editing programs, you will encounter certain terms that come up repeatedly—such as bit depth , transparency , compression , and so forth—which can be intimidating but are important to understand; they will influence which kind of format you choose for any given image on your page.

Color Depth

The color depth or bit depth of an image refers to how much “computing power” is packed into the processing of an image. The greater the bit depth, the more colors the image can contain, and the larger the size of the file. GIF images allow a maximum of 8 bits for every pixel. Because there are three basic colors used in video and graphics displays (red, green, and blue), each gets 8 bits. A little quick arithmetic (2 ⁸ ) will give you 256 possible color combinations; thus, GIF images can display a maximum of 256 colors. JPEG and PNG both will allow as many as 24 bits per image. With these formats you can have as many as 16.7 million colors in an image file (256 256 256). That is why JPEG and PNG images work better for photographs and images, both of which require a lot of color definition. The downside of the higher color depth is that it requires a larger file and a longer loading time.

Transparency

When it is said that an image supports transparency , it means that it is possible to cause one or more of the colors in the image to act as if it were transparent, thus matching the background color of the Web page. This makes your graphics look much cleaner as you use them on different pages, allowing you to create a “cut out” effect and making the borders of the picture invisible. GIF and PNG support transparency; JPEG does not. If you are creating a logo for your page, you probably will want to use GIF or PNG.

Lossless or Lossy Compression

Image compression is said to be lossless when the graphic can be compressed or saved without any loss of information. In other words, the image is exactly the same before and after the compression process. On the other hand, lossy compression involves a loss of data when the image is saved. GIF and PNG are lossless compression formats. JPEG is lossy, but the loss of quality generally is small.

Interlacing

Have you ever loaded a Web page and noticed that the images start out fuzzy or looking like they were made with blocks, then after a few seconds they sharpen into focus? These images are interlaced . Interlacing is a means of saving an image so that when it loads, it gradually progresses from a low resolution to a high resolution. This gives the visitors to your Web site something to look at while the image is loading. The image itself begins “out of focus” and gradually sharpens. JPEG does not support interlacing; GIF and PNG do.