I have always stayed away from PNG for a long time, up until recently when I feel that I don’t need to support IE6 and have to use it to implement a web design that uses quite some shadows and gradients.

I had always thought that PNG with transparency would cause lots of trouble with the IE browser. Therefore, I was quite surprised that I sailed through the implementation relatively smoothly using PNG with transparency. The only hiccup was when I tried to fade in the lighting overlay (the PNG image with a gradient transparency).

Below is a summary of my thoughts:

  • With IE9 or later, PNG with a complex transparency, whether as foreground or background image, can display and fade in (opacity animation) without any problem;
  • With IE7 and IE8, PNG images with a subtle gradient alpha channel can be displayed natively without a problem, whether as background image or foreground image – whatever images will show through properly;
  • With IE7 and IE8, the opacity of a div containing an PNG foreground image or a PNG background with transparency can be animated, as long as the transparency isĀ  “indexed transparency” (or paletted transparency) not “alpha transparency”; in other words, if the transparency mask consists of either the black or white values (0 or 255), the opacity animation seems to be normal;
  • With IE7 and IE8, if the transparency is a gradient channel with masking values between 1 and 255, the opacity animation will show the alpha channel momentarily during the animation, which is a problem;
  • With IE7 and IE8, animating the CSS properties of margin and background-position and etc still work perfectly well, with a PNG containing a complex transparency.
  • With IE6, 32-bit PNGs with transparency are not supported; but people claim that palletted PNGs (8-bit?) with transparency are supported. (see http://stackoverflow.com/questions/982058/are-png-images-cross-browser-compatible)

In summary, I will be using PNG with transparency a lot more from now on in web development. And PNG does not deteriorate over generations. PNG at 8-bit can have semi-transparent pixels that only Fireworks can generate that will work like transparent GIF, only better without the annoying halo) – see this article.

Here is also a good reference – PNG Alpha Transparency.

  • Digg
  • del.icio.us
  • StumbleUpon
  • Sphinn
  • Facebook
  • Mixx
  • Google Bookmarks
  • Haohao
  • LinkedIn
  • Live
  • MyShare
  • MySpace
  • Reddit
  • Technorati
  • TwitThis

Related posts:

  1. IE Quirks with CSS Sprites
  2. Nonsecure Content Alert in IE

Tags: , , ,

Leave a Reply

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">