Understand Web Graphics

There are scores of different ways to create, save, store, and send graphics over the Internet. Fortunately, you don’t need to be concerned with most of them. To put images on your Web sites, you need only to have a working familiarity with two or three different formats.

Learn the Differences in Graphics Formats

Although the sheer number of different graphics formats out there is enough to give you a headache, the three that are best suited for use on the Web are GIF, JPEG, and PNG. Each has its own unique qualities and is best used for a particular type of image. A key difference among these three formats lies in how images are compressed; that is, how the images are made smaller when they are saved and sent over the Web.

Use the GIF Format for Art

If you are doing navigation buttons, using clip art, or creating banners, drawings, or anything that has large blocks of the same color, you want to use GIF (Graphics Interchange Format, pronounced jiff, like the peanut butter). GIF’s particular compression format makes it ideal for these purposes.

When an image is saved, it is compressed to save space and transfer faster. Each of these formats compresses images in a different way. GIF uses something called LZW (named after its inventors, Lempel-Ziv and Welch) compression. When an image is saved, LZW takes rows of pixels with the same color and reduces them, in effect, by taking inventory of the number of pixels with that color. For instance, it is easy to compress an image of a button that is solid red and 10 72 pixels; you would merely make a computerized notation that there are 10 rows of red pixels with 72 in each row.

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.

Note

If you use a scanner, you can also capture your images as bitmaps (BMP). Although Internet Explorer will display bitmaps, there are two good reasons to avoid them on your Web pages. First, Netscape does not support them, so your images will not display on Netscape browsers. An even better reason to avoid them is that bitmap files are larger and will slow down your page loading time. Always convert bitmaps to GIF, JPEG, or PNG files.

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.

Tip

If you are creating or editing your own graphics, you can choose even smaller color depths. This is a great way to make image files load faster, as long as you don’t need as high an image quality.

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.

Grayscale

Some formats support images in grayscale, that is, a large range of shades from white to black. If you want to put a black-and-white photograph on your site, or display a color picture as black and white, you will want to use a format that supports grayscale. JPEG and PNG support grayscale; GIF does not.

Table 6-1 compares the main characteristics of the different kinds of graphic files that are best suited for Web use. A good rule of thumb is to use GIF for logos, lettering, or any image that has large blocks of color; for photographs or detailed images, use JPEG. Support for PNG is growing. If you prefer its versatility to GIF and JPEG, go ahead and use it. However, remember that a small percentage of your visitors (those not using IE6+, Netscape 6+, or Opera 6+) will not be able to view your PNG images.

Table 6-1: Comparison of Web Graphics Formats

	GIF	JPEG	PNG
Color Depth	256	16.7 million	16.7 million
Compression	Lossless	Lossy	Lossless
Transparency	Yes	No	Yes
Interlacing	Yes	No	Yes
Grayscale	No	Yes	Yes