WebHelperMagazine.com

Welcome to WebHelperMagazine.com. Please consider signing up for our RSS feed. Check out our job board, and be sure to leave comments -- we post your name and a link to your site as a way to thank you for joining the WHMag conversation.

by Tony Turner, Creative Director: Cranium Creations

With the upcoming release of Internet Explorer 7 pending, and all the talk about browser compliancy to W3C standards… And all of the hype that surrounds the Firefox browser…
…I have been asked a multitude of times about the current and future browser transparency support for my favorite of all image file formats. The Beautiful and Wondrous PNG.

What seems to be so mysterious and allusive to most folks, really isn’t that hard to grasp. I will endeavor in this article to explain this in easy to understand terms. I want to dispel some urban legends about this subject, and hope to clarify some of the seemingly foggy facts and mystic myths. All in easy to understand English, that we normal people can get a grip on.

“PNG handles all of these GIF features, and then some… streamability, progressive display, transparency, text comments… complete hardware and platform independence, and completely lossless compression.”

First, let’s understand why the PNG format is so important, and why it came to be.

PNG stands for Portable Network Graphics. And for good reason, it was designed to be portable, as we’ll see in this description. PNG provides a portable, well-compressed, well-specified standard for lossless bitmapped image files. The initial reason for developing PNG was to quite simply, replace the GIF file format. In the process of developing this replacement and superior format, PNG was enabled with several new features that aren’t available in GIF.

PNG handles all of these GIF features, and then some. GIF features that are also used in PNG are the support for: Indexed-color images of up to 256 colors, streamability, progressive display, transparency, text comments and other data that can be stored in the image, complete hardware and platform independence, and completely lossless compression.

PNG supports these important new features, above and beyond GIF’s capability: Truecolor images up to 48 bits per pixel, grayscale images up to 16 bits, full alpha channel, image gamma data, reliable detection of file corruption, and a faster progressive display.

The PNG format is designed to be simple and portable, and well compressed. Index-color and truecolor images are compressed as effectively as any lossless format, and better than most. This format is designed to be flexible and has left room for future development while backwards supporting the basic features. It is designed to support full file integrity checking as well as simple, quick detection of common transmission errors.

Truly a superior replacement for the old GIF format, PNG was designed to do anything that GIF was really good at, and then some. Streamability and progressive display properties were addressed, and in the case of progressive display, proven to be faster than GIF. Beyond GIF, PNG supports truecolor images, among the widely used image formats, none of them losslessly compress truecolor images as effectively as PNG does.

GIF provided a simple transparent-color specification, PNG supports a full alpha channel as well as transparent-color specifications. This allows both highly flexible transparency properties and compression efficiency.

PNG is built to avoid file corruption when transported over networks and has been expressly designed not to be completely dependent on a single compression technique. Thus, portable.

Oh, and it is pronounced “Ping”, as in Ping-Pong Ball. (Only, leave off the pong-ball part.)

Ok, now let us explore this mysterious Alpha Channel thing…

Alpha Channels in PNG

To put Alpha Channel into its proper perspective, we should understand Index-Color and the differences between the two.

Indexed color relates to each pixel in an image file being assigned a color from a palette, indexed to the table of colors used in the particular palette of an image. So, index-color transparency allows for a color in the palette to be chosen as transparent. This is color based and uses one slot or choice from the color palette, designated to be the transparent part of an image. Either fully transparent, or fully opaque, no values are assigned in between, it’s either 0% or 100%… the palette selection is assigned either full transparency or none at all. (That’s why you only have 255 colors available in a 256 color palette, while using a transparent background for your image. One of the slots is being used by the transparency color.)

This is the transparency ability that you’re familiar with in GIF. PNG also supports this type of transparency. The single transparent color usually used as a background so that a rectangular image can appear as any odd shape desired by the image author. Not only does PNG support this, but so do all of the current browsers… including Internet Explorer, contrary to urban legend. That’s right folks, even IE supports this type of transparency that is so often said to be unusable for PNG in IE. Not only does IE presently support it, but it has for quite some time. This is not a new development and you need not wait for IE7 to begin using PNG in this manner.

“Think of the Alpha Channel as if it were a mask. A masked area of an image that can be faded, or have an overall semi-transparency assigned to it. Any degree of opacity, fade effects, shadows, any pixel in the channel can be assigned any level of opacity.”

Alpha value represents a pixel’s degree of transparency. In PNG, this is technically and actually the degree of Opacity, as opposed to transparency. But since we are really interested in the transparency properties, that’s how you’ll usually see it expressed. In PNG, alpha is really the degree of opacity: zero alpha (0%) represents a completely transparent pixel, maximum alpha (100%) represents a completely opaque pixel.

Channel is a term that describes a set of samples, color or other, of the same kind, within an image. As in RGB, there is a Red Channel, a Green Channel, and a Blue Channel… these channels and the overlapping of them, provide all of the colors needed in an RGB image.

In the case of Alpha Channel, this is the set of pixels in an image that contain data designating an opacity value from 0% to 100%. All affected pixels in the image belong to the alpha channel, all pixels that have a value of opacity assigned to them. These can be selected by use of a mask, or any method that will select and assign a transparency value to a set of pixels or an area in the image.

Think of the Alpha Channel as if it were a mask. A masked area of an image that can be faded, or have an overall semi-transparency assigned to it. Any degree of opacity, fade effects, shadows, any pixel in the channel can be assigned any level of opacity. The actual color values of each and every pixel are retained, the image could be “flattened” or rendered without the alpha channel, and would revert to their full opacity and retain the color value. That is why I say, to think of the alpha channel in the terms of a mask… The alpha channel is giving a value for transparency, which is attached immediately after the color value in the image file code. This transparency data can be removed and the image colors will be retained. They are separate values… thus, it’s like a mask has been applied, and can also be removed.

If using the alpha channel to create just a transparent background instead of say a fade or partial transparency area, similar to an indexed-color transparency function… as in creating a non-rectangular image shape. We should go ahead and select the entire area that’s to be made fully transparent and assign it a single color. Like in index-colored transparency. The reason that I say this, is that it will make your file compress better, to be lighter and faster. Even when using an alpha channel to do this, limit the area to one color, it saves weight.

I sincerely hope this little article has shed some well needed light on a sometimes dark or grey area in our graphics creating little minds.

Firefox, Opera, Netscape and others do currently support full alpha channel transparency.
Internet Explorer 6 does not. It does however fully support index-color transparency.

And now, we all know the difference.

Inernet Explorer 7 WILL fully support alpha channel in the PNG image file format.

This will open up a universally supported and fantastic opportunity for us all, as graphics authors.
More about that next time, here at CraniumAbuse.

Thanks and Have A Great Day!

Tony Turner has been a regular contributor to a few select eList resources over the last several years. Helping others to explore and hone web building skills and promoting standards based development. A collection of recent articles can be found at Articles.Cranium-Creations.com. Contact, Link, eList, and current availability information are there as well.