HTML 4.0 Sourcebook
(Publisher: John Wiley & Sons, Inc.)
Author(s): Ian S. Graham
ISBN: 0471257249
Publication Date: 04/01/98

PNG

PNG (Portable Network Graphics) is designed as a public-domain successor to GIF. Like GIF, PNG allows for transparency, interlacing, and image compression, the latter via a nonproprietary compression algorithm (the GIF method is patented). However, PNG is also much enhanced relative to GIF, as it supports greater color depth than GIF (up to 24-bit color), 8-bit transparency (so that images can “fade in”), as well as features for color and gamma correction.

PNG is supported by Internet Explorer 4, but not Netscape Navigator 4 (there is, however, a free Netscape Navigator 4 plugin that adds support for PNG graphics). It is not supported by earlier versions of either browser.

Image Processing—Basic Issues

This book is not intended to be a graphics manual. If you are planning on doing intensive graphics work, you should hire a graphics expert—or buy a real book on graphics! However, there are some relatively simple tricks that will help you make images work effectively on the Web, and these bear mentioning here.

Reducing or Rescaling Images

You will often want to reduce the size of an image, either because the original is too big or because you want to create a small icon of the image and link it to the bigger version. You can create reduced image sizes with many graphics programs, including the ones listed later in this chapter.

When you shrink an image, you may want to smooth it beforehand—smoothing reduces edge breakup, or aliasing, created by the size reduction process. Some programs do this automatically when you shrink an image, while others let you turn smoothing on and off and expect you to do the smoothing yourself. Note that you want to smooth before or during the size reduction, but not after: Once the image is shrunk, smoothing simply blurs what’s left. This combination of shrinking and smoothing is also called resampling.

Note that it is extremely difficult to rescale images that contain text, as the text is almost always blurred to the point of being unreadable. A better choice is to remove all text from the image, resize the image, and re-enter the text using the desired font and size.

Smoothing Colors

Sometimes you will have an image that appears to have large, uniformly colored regions, only to find that, when you look closely, these uniform regions actually contain many dozens of very similar colors patterned in a non-smooth way—this often results from image dithering. Some graphics programs let you smooth the colors, which reduces this irregularity and makes it easier to compress the image in GIF or PNG format. Often this can be accomplished by reducing the number of colors in the image, also known as flattening the image or reducing the color depth.

Reducing Color Depth

Most image processing tools let you reduce the number of colors. This is useful with the GIF and PNG formats, as the process can substantially reduce the size of the image file, without significantly affecting the appearance on most computer displays. Color depth reduction is particularly useful with icons, which often use fewer than 10 colors. Color depth reduction should not be done with JPEG images, however, as the reduced color depth actually impairs the JPEG compression technique.

Composed Images

Quite often you will find yourself reusing parts of an image over and over again—for example, part of a button in a button bar, a corporate logo attached to different section headings, and so on. In these cases, it is best to construct these images from a collection of image components that are tiled together on the page to make the desired total image. In this way, the user does not keep downloading this part of the image. Once the logo is downloaded, it can be reused by appending it to different section headings, with only the headings changing from document to document. An example is shown in Figure 3.2, which displays a section heading from one of the University of Toronto pages. The top image is actually two images tiled together—a large image, consisting of the title plus the picture of the lecture theater, and a second, smaller image containing a photograph of the campus. The markup is:

Figure 3.2  A page from the University of Toronto Web site navigational collection. The graphic at the top of the screen consists of two images, tiled together. The right-hand portion is reused on a number of different pages.

<IMG SRC=“img1.gif” . . . ><IMG SRC=“img2.gif” . . . >

Because the IMG tags are flush next to each other, the images appear together without intervening space, giving the impression of a single graphic. Alternatively, the images can be tiled together using a TABLE, as illustrated in Example 9 in Chapter 2.

Special GIF Image Properties

Since GIF is still the most common format on the Web, this section looks at some of GIF’s most important properties. The references at the end of the chapter point to sources of additional information, as well as sites listing useful GIF utilities not discussed in the text.

Reducing GIF Image File Size: The Colormap

You can reduce the size of a GIF image file by reducing the number of colors used in the image. The GIF format can take up to a full byte to store color information about a pixel, which is why GIF is limited to 256 different colors (256=2⁸). However, you don’t always need a full byte for a pixel—the GIF format is clever enough to know, if an image has only 8 colors instead of 256, that it needs fewer bits per pixel to index all the colors. This reduces the amount of data needed to store the image. Also, as discussed previously, reducing the number of colors can make it easier to compress the image, further reducing file size. Some tools particularly suited to this task are BatchMaster (Windows PCs) and Debabelizer (Macintoshes—the freeware version Debabelizer Lite is also suitable). However, most image-processing programs, such as Adobe Photoshop, PaintShop Pro (a shareware program for Windows PCs), Lview Pro (another shareware program for PCs), and Graphic Converter (a shareware program for the Macintosh), or the pbmplus, GIMP, and ImageMagick packages (shareware programs for UNIX workstations) have tools for reducing the number of colors in the image.

You also should want to reduce the number of colors because of the limited display capabilities (the 256-color limit) of many computers. Ideally, the fewer the colors the better, as this frees up space in the color table for other images. And, as mentioned, it is also a good idea to create image icons using the Windows colormap as the default color palette.