Adding a PNG

You may recall that fairly early in the project, we added the image of the big flower to the design. That image file is a GIF89a with a transparent area (skip back to Figure 10.5 if you don't remember clearly how it looks). At the time, there was a brief mention that a PNG image would be a much prettier solution, and that we'd talk about it at the end of the project.

Well, here we are at the end of the project, so let's talk about using a PNG instead of a GIF.

From a visual design perspective, the primary advantage of PNG is that a PNG file can contain gamma-correction information (so you don't have to worry about your images becoming lighter or darker in different operating systems) and it can include up to a full 16-bit alpha channel. This allows for translucency and transparency that's far more sophisticated than the simple on/off transparency of GIF files. In a GIF, a pixel is either opaque or transparent; there's no in-between. In a PNG image, every pixel can be semi-opaque to whatever degree is desired. So, creating a PNG that fades smoothly from black at the top to totally transparent at the bottom of the image is a snap.

Let's take a look at Figure 10.23, which shows the PNG we'll be using as well as the channels in the file.

The red, green, and blue (RGB) channels are straightforward enough. The Alpha (A) channel, the one at the bottom, shows the transparency mask for the image. Any area of the channel that's fully black is fully transparent, and the fully white areas are opaque. Any shade of gray represents a semi-opaque area. The image itself is shown composited over a white background.

Given the alpha channel mask, the shadow will be translucent, and the area around the flower will be totally transparent. We can't just replace the GIF with this PNG, though, because the background of the page header stops right at the edge of the flower (refer to Figure 10.4). We'll need a new masthead background that stretches all the way across the top of the design, one like that shown in Figure 10.24.

If we wanted to really be thorough, we'd fill in the rest of that white area with pictures, but since the flower will be placed over that section of the background, we can skip it. Let's replace the old images with the new background (pageHeader2.jpg) and PNG (ph-flower2.png) images.

#pageHeader {background: url(pageHeader2.jpg) 0 0 no-repeat;

  height: 157px; width: auto; }

#pageHeader h1 {background: url(ph-flower2.png) 0 0 no-repeat;

  height: 330px; width: 250px; position: absolute; z-index: 101;

  top: -95px; right: -80px; margin: 0;}

At this point, the PNG will work its magic in most current browsers. There is a glaring exception: Internet Explorer for Windows. (Even IE5/Mac will handle the PNG correctly.) It will display the PNG, but it won't do anything with the alpha channel. That sort of defeats the purpose. Fortunately, we can hack IE/Win to recognize and handle the alpha channel with an HTC file, otherwise known as a behavior file. By using a PNG-opacity behavior file (there are several available on the Web, although most concentrate on fixing inline PNGs instead of background PNGs) and hooking it into our style sheet, we can get the result shown in Figure 10.25 in IE/Win as well as Opera, Mozilla, Firefox, IE/Mac, Safari, and such.

#pageHeader h1 {background: url(ph-flower2.png) 0 0 no-repeat;

  height: 330px; width: 250px; position: absolute; z-index: 101;

  top: -95px; right: -80px; margin: 0;

  behavior: url(png-opacity.htc);}

As we discussed in Project 6, behavior is not part of CSS, but is instead a CSS-like statement that's proprietary to Internet Explorer for Windows. Thus, using a behavior declaration will prevent your CSS from validating. There's really no way around that.

There is another potential drawback to using a PNG. Because the image contains not only color information but the alpha channel, it tends to be larger than other image file formats. If the PNG uses 32-bit color, which it's perfectly capable of doing, that will drive up the file size even further; the advantage is that the image can have a colorspace of millions of colors instead of just 256 colors or 32,768 colors. PNGs also use lossless compression, which can mean larger files. JPEG, by contrast, uses a lossy compression, which is why you get "wrinkles" in JPEGs that have been highly compressed.

What does that mean in real terms? Well, the GIF version of the flower is a 32KB file. The PNG saved out by Photoshop was a 152KB file. That's a whole lot of extra file size just to get a translucent shadow!

It is possible to lower the PNG's file size with utilities; Porter Glendinning, one of the book's technical reviewers, was able to get the flower PNG down to 60KB or so using various utilities. That's still twice the size of the GIF. Is it worth it? Perhaps, and perhaps not. But then Porter ran the image through the utility pngquant and got it down to 28KB—about 4KB smaller than the original GIF, and looking much, much better to boot.

So why aren't PNGs used all the time? There are two reasons. The first is the lack of convenient support by IE/Win; most authors wouldn't think that a behavior file called in via a style sheet would be able to fix an image format's support. (It certainly wouldn't have occurred to me.)

The second is that most commercial tools, such as Photoshop, do a very poor job of dealing with PNGs in an intelligent way. Typically, you get extreme choices like being able to save your PNG as an 8-bit color file with on/off transparency (basically, GIF in another format), which means a small file size; or else a full 24-bit color with an 8-bit alpha channel, which leads to really big files (the number 152KB comes to mind). This is very likely why PNGs have a reputation for being pretty but incredibly bloated. The fault, it would seem, lies not with the format but with the tools.

If authors were able to pick in-between possibilities, like an 8-bit color image with a full alpha channel, then we'd be getting somewhere. As it stands, authors could start using PNGs in their designs in three easy steps:

• Create PNGs with full alpha channels for use on the Web.

• Run the resulting PNGs through freely available optimization utilities like pngquant.

• Hook in an HTC file to get IE/Win to play nice.

The lack of widespread support for PNGs in IE/Win and commonly used programs has undoubtedly hampered their adoption, and so there isn't the same breadth of knowledge that GIFs and JPEGs enjoy. It may be that all it will take to correct that situation is for authors to decide to use PNGs on a more frequent basis, and to share what they learn with one another.