PNG's Not GIF

Or, the Portable Network Graphic.

A bitmap graphic format designed by the GNU folks as a replacement for the GIF, which uses the proprietary LZW compression algorithm. PNG also has spiffy features like alpha channels, meta-information and that venetian blind interlace thing.

How long till all the three-letter acronyms are used up?

A spiffy alternative internet graphics format. It can take 16M colors (Which GIF can't do, 256 color limit) and maintain perfect quality (Which JPEG can't do well, with it's compression methods).

That's all the common graphics user might care about, but hey, with alpha channels and meta-information, as well as not being a proprietary image format owned by a company who doesn't realize the rules are changing, it's got something for everyone.

One of the few problems with PNG, however, is the horrid filesize on 'noisy' or nonuniform graphics. Photographs, especially, do NOT compress well under PNG. Sure, they maintain perfect quality, but the filesize is inflated to numerous times the size of a JPEG of the same image with somewhere in the range of compression 20. Thus, PNG is far better suited for simple graphics or graphics with relatively 'clean' colors, such as drawings, comics, web widgets, etc. In situations where JPEG's lossy compression isn't noticeable, PNG might suffer.

PNG is the official graphics format of Exclaim Industries. In that it's all I use.

UPDATE!!! I have been informed by blaaf that more recent versions of the GIF image format (Anything past GIF98) CAN, in fact, handle more than an 8-bit color pallette. Hence the strikeout text. Oops.

And now yerricide tells me it's possible to do 16mil color images with GIF89, but... um... I'm not exactly certain his method is 'simple', per se... Still waiting to hear back from him (Honestly, I'm not sure if he's being sarcastic or not)...

Righto, he was serious. Except he described it as more of a hack.

PNG graphics seem to be the best-kept secret on the World Wide Web. Netscape's browser has supported it since version 4.04, and Internet Explorer has had it since version 4.0. You can put it right into an IMG tag and have it show up when people visit your site. Adobe Photoshop supports it. Macromedia Flash supports it. QuickTime supports it. But gosh darn it, nobody seems to be using it.

Which is a shame, because it's got all the best features of GIF -- lossless compression, optional transparency -- and JPEG -- millions of colors, patent-free algorithm -- plus a few extras that neither one has, like embeded metadata that search engines can index, automatic gamma correction, and an alpha channel for multiple levels of transparency. It's smaller than a GIF of the same image, and while larger than a JPEG, provides far more detail and no loss of data.

The alpha channel is the biggest obstacle to immediate widespread acceptance of PNG, it seems -- only Netscape 6.1 supports transparency in PNG graphics so far. While this is certainly not the most important feature of the PNG format, it's probably the coolest and consequently the most annoying omission.

Workaround for Internet Explorer's faulty PNG Alpha channel support

The only thing that still prevents PNG's universal adoption is The Evil Empire, as usual. There has been two releases of Internet Explorer and still do not support the alpha trasparency channel properly. Fortunately, there is an answer, a simple answer. The workaround is a kind of poetic justice--The fix only works on IE browsers, and only IE browsers need the fix. It is done with Microsoft proprietary extensions to CSS, which means it would get ignored by any non-microsoft browser.

We are going to use the AlphaImageLoader filter from the Microsoft stylesheet extensions. It is perfectly equipped to deal with the PNG transparency channel. First, let's use the SPAN tag to load our IE-only image. We'll create a style entity that matches our picture size exactly then filled with our source image.

<SPAN style="width:120px;height:40px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='transparent.png');" >

At this point, we can try it out in Internet Explorer. Bravo. Now what about those non-IE folks? They'll get a empty SPAN entity, because that filter statement won't mean anything to them. Here's where we get really clever.

<IMG style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" SRC="transparent.png" />

Whoa. We load the same image again into that SPAN entity but we make it invisible. Why? Because only the IE browsers will hide the IMG and other browsers will show it normally. So IE browsers see this:

<SPAN style="width:120px;height:40px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='transparent.png');" ><IMG style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" SRC="transparent.png" />

while everyone else sees

<SPAN style="width:120px;height:40px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='transparent.png');" ><IMG style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" SRC="transparent.png" />

All this works without dynamic HTML generation,JavaScript or Java applets. A winning hack!

There is a simpler way to get transparent background PNGs to work in IE. Simply downconvert the truecolor picture to a 256 colour palette, then pick a colour to assign as transparent. Note: this is not alpha blending, it's GIF style transparency mask.

Plaudits to Mark Wilton-Jones for his most excellent tutorial http://www.howtocreate.co.uk/
Razzberry to MS for not fixing Q265221

PNG is pronounced "ping". This is in the official specification. With GIF, you have at least two valid pronunciations. Not so with PNG.

Compelling as PNG's feature set is -- 24-bit color with an alpha channel, good lossless compression, support in all modern web browsers -- the most compelling reason to use it is probably to avoid embarassment. You can say "PNG" in front of your friends and they won't laugh at you.

Log in or register to write something here or to contact authors.