Welcome to CGI City - One of the biggest WWW Resources for CGI and Perl materials
CGI City Articles

Can You Say PNG?
Article by: Franky Tong

PNG (pronounced "ping"), officially known as the Portable Network Graphics format, is a graphics file format designed to be the successor to the once-popular GIF format. Unofficially it is also the recursive acronym (any Unix guru will tell you what it is) for "PNG's Not GIF".

The initial motivation for developing this new graphics file format, apart from trying to improve the aging GIF, was related to legal problems which arose after Unisys and CompuServe claimed in late 1994 that they had the patent on the LZW compression algorithm used in GIF. The royalty issues have since scared many small software developers away and that has resulted in decreased support for the GIF format.

So how is PNG better than GIF? In a lot of ways. To highlight just a few, PNG offers:

  • unambiguous pronunciation (I can't resist mentioning this first)
  • full alpha transparency in 8- and 16-bit modes (which means multi-level semi-transparency becomes possible), as opposed to the 1-bit (on-off) mode in GIF
  • better compression than GIF, typically 5% to 25% (but often 40% to 50% on tiny images)
  • 24- and 48-bit truecolor support in addition to GIF's 1-, 2-, 4- and 8-bit palette support, so images are no longer limited to 256 colours
  • two-dimensional interlacing scheme for faster progressive viewing
  • non-patented compression, any software developer can implement PNG freely
Here are a few images saved in different PNG, GIF formats. As you can see from below, the 256-colour images suffer from quality degradation due to the 256 colour limits. The truecolour mode provided by PNG helps to maintain the original quality of the photograph at the expense of larger file size.

Truecolour PNG (34.3K)

256-colour PNG (11.5K)

256-colour GIF (12.3K)

In this article, I will concentrate on the alpha transparency support across different browsers on different platforms.

Up till now, most web users, including many web designers and developers, don't realize that the browsers that they use everyday actually support the PNG file format. If you can see the all the three images displayed above, your browser does support PNG.

Among all the spiffy features that PNG has to offer, full alpha transparency is arguably the most called-for from the graphics and web development community. With full alpha transparency support, overlapping of semi-transparent images becomes possible. Wouldn't it be a dream comes true? Soft drop shadows wouldn't be a pain anymore...if you're into that sort of thing!

Let's not get too excited too soon.

The "big two" browser developers, namely Microsoft and Netscape, don't seem to care too much about the advanced features of the PNG format. Their two browsers, Microsoft Internet Explorer and Netscape Navigator respectively, started offering native PNG support since about 2 years ago when they released version 4 of their products. Microsoft put in PNG support since version 4.0 beta 1 and Netscape did it before their version 4.04 came out. The so-called support was very minimal (that's my euphemism for "pathetic"). The PNG format has been around for almost 4 years now, yet there's still not much you can do beyond displaying inline opaque PNG images.

The latest Windows version of MSIE (version 5.5) still can't display transparent images correctly. It only displays images with simple on-off transparency. For palette-based images with multi-level transparency, semi-transparent area will be shown completely transparent. Non-palette images will be shown completely opaque against a light grey background. The folks on the Macintosh platform seem to have much better luck, as version 5.0 of MSIE (released earlier this year) on MacOS finally manages to display PNG images with full alpha transparency correctly.

As for Netscape, it simply doesn't do transparency at all for PNG's. As of this writing, the latest version is 4.74.

MSIE 5.0 on Mac was surely a significant breakthrough, but the simple fact is that a overwhelming majority of computer users today use the Windows operating systems, so for most of us, nothing has really happened in these two years since the two major browsers started supporting (for lack of better word) PNG. Things started to look up though, when Netscape decided to hand their browser's future to the open-source community, which became the Mozilla project.

The Mozilla project will have great impact on the future releases of the Netscape browser, as the next generation of Netscape Navigator (version 6) will be based on the Mozilla code (apart from features for Netscape's own branding purposes). The Linux and Mac versions of the evolving Mozilla browser have already had full support for alpha transparency since April this year. As shown in the screen captures below, the latest build (July 20th) of Mozilla for Windows also fully supports alpha transparency! From the way things are looking right now, it seems very likely that the next preview release (PR2) of the upcoming new Netscape browser will feature full support for PNG.

A PNG image with alpha transparency.
Notice how the background shows through the glass and wine.

Besides the browsers, everything else is pretty much in place for PNG. Macromedia's Flash, for example, has had full support for PNG since version 4. Most image editing software on the market today also handles PNG's well. Now the only remaining questions are how well the upcoming Netscape 6 will catch up in the browser race, and when, if ever, Microsoft will fix the crippled implementation of PNG in its Windows browser.

Related Links

Back to Articles Index Page

About the Author:
Franky Tong is a Senior Project Manager for Pacific Connections Ltd. - a Hong Kong based consulting firm specializing in the design and implementation of intranets, extranets and e-commerce Web sites for multinational companies.

This article is copyright © Pacific Connections Ltd.
Reprinted by CGI City with permissions.

Articles contained herein are copyright © CGI City unless stated otherwise.

Search For:
Quick jump to
Home | About Us | Contact Us | Link To Us | Search
Tips & Tutorials | References | Books | Add A Resource
Custom Programming Services | Advertise
Disclaimer | Privacy Policy

Copyright © 1998-2099    CGI City    All Rights Reserved
All original materials contained herein including text, images, and original scripts written by CGI City, are copyrighted by CGI City. All other scripts and materials are copyrighted by their respective authors/owners.