Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

PNG offers broad support for many kinds of images, including

•  True color images—Prior to PNG, your only option for true color (24-bit color) was to use the JPEG format.

•  8-bit palette images—PNG, like GIF, supports images that are composed of 8-bit color palettes. PNG can also support 1-, 2-, and 4-bit palettes as well, so you can reduce the color depth (and hence the file size) of a PNG graphic if you don’t have too many colors.

•  Grayscale images—PNG allows for 1-, 2-, 4-, 8-, and 16-bit grayscale images.

One thing that PNG does not support, however, is animation. Recall that for animated GIFs, the many images that compose the animation are stored together in one file. PNG was developed as a single-image file format, so no way exists for it to support animation.

---

NOTE:  A proposal is under development for a format called MNG that will support storage of multiple images and, therefore, animation.

---

Browser and image software support for PNG was a little tentative for the first year, but then Microsoft took the step of making PNG the native format for its Office97 suite of products and announced its intention to provide inline support for PNG graphics in release 4 of its Internet Explorer browser. Since then, many other companies have followed suit, and PNG is now supported by the following software:

•  Netscape Navigator 4.0 and later

•  CorelDRAW 7.0 and later

•  Macromedia Free Hand Graphics Studio 7.0 and later

•  Microsoft Image Composer 1.5 and later

•  SoftQuad HoTMetaL 3.0 and later

•  Adobe Illustrator 7.0 and later

•  Adobe Photoshop 4.0 and later

•  Jasc, Inc. Paint Shop Pro 3.01 and later

Thus, it is possible for you to start creating PNG graphics for your Web pages now, and visitors using the most recent releases of Netscape or Microsoft browsers will be able to view them. Alternatively, you can convert your existing GIF and JPEG graphics to PNG using one of the more PNG-compliant conversion tools such as Adobe File Utilities, DeBabelizer Pro (Windows), or DeBabelizer ToolBox (Macintosh).

---

NOTE:  For the latest about PNG, including documentation of the standard, sample images, and a list of PNG-compliant software, consult the PNG home page at http://www.cdrom.com/pub/png/png.html.

---

Choosing a Format

The question of which format to use is often a daunting one for beginning designers. Fortunately, some ways are available to focus your thinking as you make this choice:

•  Do you need to create a transparency effect? If so, you have your choice of either GIF or PNG.

•  Do you need to produce an animation? Unless you want to code a server push animation, it is easier to place animations on your pages by using animated GIFs.

•  Is your graphic a full-color image? Full-color images, particularly photographs of things in nature, are best stored in JPEG or PNG formats so that you can harness their support for more than 16 million colors.

•  Does your graphic have any sharp color changes or boundaries? Some graphics change quickly from one color to another, rather than fading gradually over a continuum of colors. Because of the mathematics behind the compression algorithm, JPEGs don’t cope well with sudden color changes. Use GIF or PNG to handle images such as these.

•  Do you need a fade-in effect? This isn’t too much of a discriminator because GIF, JPEG, and PNG all support some type of fade-in effect—interlacing for GIF and PNG, and p-JPEG for JPEG.

Using the Browser-Safe Color Palette

Lynda Weinman, a popular author on the topics of Web graphics and color, has advanced the idea of a browser-safe palette—a set of colors rendered the same way by any browser on any platform. Netscape Navigator and Microsoft Internet Explorer both use the same default 256-color palette when rendering Web pages, but because of slight differences between the PC and the Macintosh, 40 of these colors can appear differently, depending on the platform. If you remove these 40 colors from the default palette, the remaining 216 colors compose a palette that should appear the same regardless of a user’s hardware or software.

The browser-safe color palette is freely available from http://www.lynda.com/hex.html, ordered both by hue and by RGB color values. You are welcome to download the palette and use it to make your GIF images and other colored page elements as browser friendly as possible. Macintosh users can check out Pantone’s ColorWeb color selection application at http://www.pantone.com/catalog/colorwebss.html.

Creating Transparent GIFs

When you make a transparent GIF, you designate one color in the image’s palette to be the transparent color. Pixels painted with the transparent color enable the background color to show through. Figure 5.11 showed you transparent and nontransparent versions of the same image.

This technique is useful in getting rid of the bounding box that typically surrounds a graphic. When you compose an image in a graphics program, the workspace is almost always rectangular. Your image goes inside this rectangular region (the bounding box), and invariably some amount of space exists between the image and the edges of the box. By choosing the color of the excess space pixels to be transparent, you make them disappear on the browser screen. This is what happened in Figure 5.11. The bounding box pixels in the image using the transparency option were the ones designated as transparent, so they enabled the white background to show through and give the effect of the circle sitting right on top of the Web page.

Think twice before putting a border around a transparent GIF because it will outline the bounding box and ruin the transparency effect.

Many popular graphic programs support transparent GIFs. One such program that you will find on the CD-ROM with this book is LView Pro. LView Pro is a terrific shareware program that is well worth the $40 you will pay for the license.

Creating a transparent GIF in LView Pro involves the following two simple steps:

1.  Designating a color as the background color

2.  Instructing LView Pro to note the background color as the transparent color when saving the file

Figure 5.13 shows the LView Pro interface. On the right side of the screen, you will find the Color Selection dialog bar. Along the top of the bar, three rectangles display, from left to right, the foreground color, the background color, and the transparent color. To change the transparent color, move your mouse pointer to the color in the color palette (at the bottom of the dialog bar) that you want to be the new transparent color; press the Alt key and click either mouse button. You should see the color in the third rectangle at the top change to the color you selected.

FIGURE 5.13  LView Pro gives you access to an image’s entire color palette, enabling you to choose one color as the background color.