PNG 24 browser support - Where are we after 10 years?

Years ago when we got started in web design there were two web friendly image formats; GIF and JPEG (JPG). Each format works better for different types of images. GIFs are loss less and compress like a fax. JPEGs are lossy and compress using a sinusoidal algo. Basically, JPEG are good for images with gradually color changes such as photographs, GIF are better at displaying sharp contrast such as graphics with text. One major advantage of GIFs is they can have transparency. (Note: the emerging JPEG 2000 format also supports transparencies) In 1995 there began to be hype about a new file format, PNG. PNG compression is very similar to GIF but it offers 8 bits of transparency verses GIFs binary or 1 bit transparency. PNG's 8-bit transparency allows us to anti-alias transparencies giving us a much smother transition to transparent. By 1999 PNG was still considered a new format that browsers were not yet supporting so we stuck to GIFs and JPGs. PNGs are very useful in Flash animation, allowing us to move an image over another and get a realistic transparency effect. However, in standard web page coding you don't need to dynamically stack images. Typically all image manipulation is done in Photoshop to create static images that integrate with the site's background colors. Basically, inadequate browser support and very limited need for transparencies in web page design made PNG the forgotten format. Today, as DHTML becomes more standard we will be using the z-layer or background/foreground options to stack images. Also if you have a site where the background colors can change, PNG allow you to have one set of graphics that work on all pages. (For an example check out the color change on the different sections of Intelinet Systems. The left-hand nav buttons were done in text since it would require different sets of nav buttons for each background color. PNG would allow us to do one set of graphical nav.) I came across my own need for PNG recently. I was adding administration icons to the LevelTen Site Directory (a new L10 App). The Site Directory allows users to define custom templates that can have any background color. I tried to use GIF's binary transparency to allow the icons to inherit the user defined page color. It works, but the binary transparency gave a very unappealing, jagged edge to the circular icons. So I tried PNG 24 (the 24 bit version of PNG). I recompressed my icons using Photoshop for PNG 24, uploaded and wow they worked in the FireFox browser I was developing. Hmm, I thought, why in all my reading about web design best practices is there not more discussion about using PNG? Why don't I see other websites using them? I thought browsers didn't fully support PNG. I started testing in other browsers. Sure enough, I opened IE and what was supposed to be transparent was a light gray. The PNG transparencies work in virtually every browser but IE using standard img tags. That's why there is no current hype. The good news is that there are work arounds to get PNG transparencies working in IE, the bad news is they tend to be code intensive and break W3C standards.

The processes

Using JavaScript, you have to load the PNGs using proprietary IE filters. These filters only work in IE, so you have to use a JavaScript browser detect function to write the alternative loading for IE and standard loading for all other browsers. (Note: we include the browser detect function in our standard web page setup code.) A detailed write-up on the JavaScript process can be found here http://www.alistapart.com/articles/pngopacity/ An interesting article using server site PHP can be found here http://www.koivi.com/ie-png-transparency/

The Bottom Line

It is very disappointing that IE does not support the PNG transparency correctly. In general the work around is not worth it, so avoid it if you can. If you really need to anti-alias transparency use the methods described in the above articles. P.S. I hope it doesn't take more than ten years for browsers to support JPEG 2000.