For most website designs, the portable network graphic, or PNG, is simply the best available image format. But older, noncompliant versions of the Internet Explorer browser (IE) poorly managed this extensible file format’s powerful transparency capabilities, making it hard to design for cross browser compatibility.
Thanks to a great script from Unit Interactive, you can mostly overcome IE6’s PNG weaknesses and use the mighty PNG in many aspects of your design without compromising cross browser compatibility.
The Unit Interactive PNG Fix
In this edition of “Web Design Tips”, I am going to provide a bit of information about the PNG format, try to explain why it is superior to other web formats, and quickly show you how to implement the most effective IE6-compensating PNG fix that I’ve seen.
Video: Implementing the Unit Interactive PNG Fix
In Praise of the PNG
The World Wide Web Consortium, the Internet’s standards body, first identified the PNG as the preferred web graphic in 1996. It then reiterated the PNG’s potency in November 2003, with a detailed abstract called “Portable Network Graphics (PNG): Functional Specification”.
Originally chosen to replace the GIF file format, the PNG offers a lossless, portable, and well-compressed solution for web graphics that is capable of far superior image reproduction than the GIF format. (Wikipedia contains a good explanation of “lossy” versus “lossless” compression. Suffice it to say “lossy” images lose original pixel characteristics that are retained with “lossless” images.) The PNG is also typically smaller than other web image formats, although high-resolution JPG files can sometimes offer similar quality in smaller files—unfortunately JPG is not capable of including transparency.
Finally, the PNG’s best feature is how it beautifully manages transparency, enabling wonderfully layered designs that are just not possible with GIFs or JPGs.
PNG Superiority to GIF
- Lossless format
- Far better image quality
- Better transparency
- Typically smaller file sizes
PNG Advantages Over JPG
- Lossless format
But IE6 Blows It
Implementing the Unit Interactive PNG Fix
- Step No. 1: Download the Unit PNG Fix from Unit Interactive. Easy.
- Step No. 2: Place the unitpngfix.js file and clear.gif in your site’s directory. The unitpngfix.js file might best go in your script folder, while the clear.gif file belongs in the relative root.
Step No. 3: Add the IE specific code into the
<head>section of your web page. Here is the code.