Practical Ecommerce

Web Design Tips: Use this PNG Fix for Attractive Images in Older Browsers

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
  • Transparency

But IE6 Blows It

In the noncompliant IE6 browser, the PNG’s awesome transparency is rendered as a flat drab gray. So otherwise great-looking, easy-to-layer images are suddenly shown as gray boxes with a picture in the middle. Unfortunately, IE6’s faulty PNG rendering and its relative popularity (something like 20 percent of U.S. Internet users) have combined to make designing with the PNG format a challenge. For the past several years there have been dozens of JavaScript solutions to the IE6 PNG, and I have used something like 50 of them. Microsoft even offered a JavaScript solution of its own.

Implementing the Unit Interactive PNG Fix

One of the reasons that I like the Unit Interactive PNG Fix is that it is automatic. Once you have the JavaScript and a clear GIF file in your site’s directories, just call the script and you’re done.

  • 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.

    <code>&lt;!--[if lt IE 7]&gt;
    
    
    &lt;script type="text/javascript" src="URL FOR unitpngfix.js"&gt;&lt;/script&gt;
    
    
    &lt;![endif]--&gt;
    </code>

Resources

Armando Roggio

Armando Roggio

Bio   •   RSS Feed


email-news-env

Sign up for our email newsletter

Comments ( 2 )

  1. Sultan Shakir May 20, 2009 Reply

    Hmm… I wonder how this compares to my beloved Jquery approach to this?

  2. Armando Roggio May 20, 2009 Reply

    Sultan, I would love to try your beloved jQuery approach. Could you post a link?