IE7 Transparent PNG Implementation


Internet Explorer Team Blog

IE7 Transparent PNG Implementation

My name is Sam Fortiner and I’m a developer on the Internet Explorer team here at Microsoft.  I joined the company about a year ago when I was given the opportunity to work on IE.  Since then I’ve worked on several aspects of IE and recently settled down into the layout and display team.  As part of my work in this team, I implemented support for per-pixel alpha in PNGs.

Support for per-pixel alpha in PNGs in IE, or transparent PNGs as I’ll refer to them going forward, has been called many things over the last few years.  You can find places around the web where it was called:

  • A simple bug-fix
  • A missing and promised feature
  • An optional feature per the PNG spec
  • Impossible without a re-write of the display engine in IE
  • Etc. 

As the dev who implemented the support, I can state that it was neither a bug-fix nor did it require a re-write of the display engine.  Instead, it ended up being somewhere in-between the two and required what I would call ‘feature work.’  Implementing transparency support for PNG images required a significant amount of modification to the image decoding and display pipeline in IE along with a significant amount of new functionality added to the PNG decoder. 

The modifications to IE’s image pipeline were required because transparency in IE has historically only included palette based transparency or binary transparency.  The data structures and image formats necessary to pass around more complex transparency information were not available.  Adding this information to the pipeline involved touching how all of the image decoders worked and were displayed.  Additionally, functionality to perform the alpha blending needed to be hooked in.

The PNG decoder itself required a significant amount of work as well.  For example, paletized images with per-index alpha would lose their transparency information and wouldn’t even display in IE.  Progressive display using Adam7 interlacing was only minimally implemented and needed to be fleshed out.  New functionality needed to be added to perform format conversions that previously hadn’t been required.  Addressing these types of issues in the PNG decoder was part of the work that needed to be done to fully support transparent PNGs.

To help validate the feature work I was doing, I frequently referred to the following web pages to check the rendering behavior:

Shortly after checking in the feature, Dave Massy experimented with a couple other tests such as playing a video underneath a transparent PNG.  Overall, transparent PNG support is looking quite solid in IE7, based on our tests.

There are a couple points I feel are worth mentioning before wrapping this posting up.  First, the type of PNG images that IE can render has been improved as a result of the work done.  Previously, paletized PNG images with alpha would not render in IE.  Now, these types of images should render correctly.  Second, it’s worth noting that the AlphaImageLoader should work in IE7 the same way that it worked in previous versions of IE.  The changes necessary to implement transparent PNG support should not have impacted the ability to use this filter in any way.  This should help with backwards-compatibility scenarios.

There are also a couple of limitations worth mentioning:

  • Certain filters may not behave as expected due to how filters are implemented.  Filters work by rendering the content of their attached element to their work surface and then modifying that surface before compositing it to the output surface.  Because of this, alpha blending of a transparent PNG with non-binary transparency may lead to unexpected results.  For example, applying a BasicImage filter with an opacity attribute to an IMG element with a transparent PNG will fill the work surface with the transparent PNG alpha alpha blended with a solid gray background.  The work surface will then be alpha blended at the specified opacity level with whatever is under the filter.
  • MSTime does not support non-binary transparency for PNGs.  This is because MSTime doesn’t understand anything other than binary index-based alpha.  Because of this, transparent PNGs in MSTime elements are expected to continue to render as they do in previous versions of IE.

I’m very interested in providing the most robust transparent PNG implementation possible.  If there are specific scenarios of interest to you or if you know of other test pages that you would like to bring to my attention, please do so by posting a comment below.

- Sam

  • Loading...