What??
Who says that Graphic Design Artists, Web Designers, and Web Application Developers, must not use the PNG image format if it contains transparent, alpha channel elements?!?

The sad news is, the statement is true for anyone concerned about maintaining a consistent design appearance, cross browser. If a .png image appears in the page using the typical markup, such as…
<img src="some/path/to-image.png" />, Internet Explorer 6 tends to display the alpha channel of a transparent .PNG image as a dull, gray color without any transparent attribute. The result is NOT aesthetically pleasing, especially in comparison to what is lost– the nice effects which can be achieved with .png translucency. It is possible to get MSIE 6 to recognize the png alpha channel, however, some unusual workarounds must be employed such that the target image will no longer appear in the markup as a common <img> tag. The IE6 PNG Alpha Workaround is detailed below, but the point of this entry is to emphasize the practical use for an [Open Source] graphics program available for PC’s running the .NET Framework, 2.0. The topic in focus is Paint.NET (pronounced, ‘…Paint Dot Net…’), a free-to-use software which is becoming very popular among the amateur and pro designers as well, referred to by its developer as a way of offing “ Photoshop for Everyone ”

Got PNG? Got IE 6? Got dissed!

When I recently installed XP on a new hard drive and tried to view some of my newer designs using IE 6, I was reminded with great disappointment of the sub-standard quality of IE 6. So many of the PNG images I’ve used in my work contain alpha channel transparent elements, and every one of them look awful when displayed in IE 6. It’s a disheartening experience for a creative designer to be stifled by having to live with the reality of such a software-imposed handicap caused by IE 6 affecting his otherwise quality design work.

Skilled Designers Work with Handicap

Let’s assume that the designer isn’t prepared to accept the challenge of advanced CSS to force IE6 into recognizing the .PNG alpha channel. We’ll consider that our fictional designer is unaware of the workaround technique, so due to the (horribly out-dated) restrictions imposed by IE 6 which handicaps both the user and the designer, the creative designer must resort to using the lack-luster GIF format for transparent imagery.

Image Editing Software to the Rescue

The GIF format, though it does support transparent elements of the image alpha channel, unlike the newer PNG format, GIF alpha channel support results in an image with transparent areas which appears as either “on” or “off”– that is, completely transparent, or completely opaque– whereas PNG is capable of creating translucent effects, such as smoke or frosted glass which is only partially see-through. So, our web graphics artist must limit his creativity to what he can do with transparency in .GIF format images. There will be no smooth gradient fading of opaque-to-transparent, and any thought of overlapping layers for special background effects must be abandoned altogether, unless it can be done with an on-off-on transparent channel, vs an opaque, fade-to-alpha, transparent, fade-back-to-opaque, opaque effect. Faced with the IE6 Handicap, the designer must set out to find a digital image editing software capable of utilizing the .GIF alpha channel to its full capacity. Paint.NET is that software, and best of all– there is no fee to use it!

Meet Paint.NET for Windows XP

The huge advantage afforded by Paint.NET to the Windows user is the ability to adjust the blending of the Alpha channel into the flattened final image, production export.

I can’t recommend Paint.NET highly enough– even if only for the singular purpose that it creates the best, most versatile .GIF images I’ve ever produced. The advanced .GIF save options are so intuitive and effective, I can’t believe we haven’t seen this sort of feature a decade ago implemented in some of the Software the likes on which many have spent so many hundreds of dollars.

Indeed, there is no doubt that the PNG format is far superior to the GIF format when it comes to any transparency (transparent alpha channel) effect of digital images embedded in html pages, and wise Web Developers should be looking at the next generation format for web imagery, the incredibly versatile.SVG format, but if the User doesn’t have IE6, it makes more sense for the author (the web designer) to author the document with reference to a GIF image, not a PNG image.

Forcing IE6 to Recognize PNG Alpha

I was fortunate to stumble upon an article at WebbedEnvironments.com, wherein the author provides an easy-to-follow, detailed tutorial on how to enable the IE6 alpha filter using CSS, without damaging a PNG enhanced layout for other browsers which natively support PNG. The technique not only requires adding IE6 specific code to the CSS, but also requires modifying HTML– to the degree that this workaround is probably not practical for web designers whose existing designs will require extensive modification. It’s not difficult, but would be a tedious endeavor to apply the workaround to several documents or web sites. However, the workaround should be used whenever possible, within reason.
I recommend you learn this technique, and employ it in all of your designs henceforth. Many thanks to Jason Teague for WebbedEnvironments.com and his article on IE6 PNG alpha support!