Alexei@Nitobi

As many of you probably know.. PNG’s (Portable Network Graphics) are graphic files that support (among other things) alpha-channel information for images (transparency). For the web it means you can overlay PNG’s over your web pages to do things like nice drop-shadows and such. For an example, check this out.

In Internet Explorer 6 we were given the CSS ‘filter’ attribute, which allowed the developer to essentially use directX to handle things like… PNG opacity! This was a fantastic addition, although kludgy. eg:

Instead of <img src=”my32bitPNG.png”>

you had to do things like:

<div style=”width: 50px; height: 50px; progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’my32bitPNG’, sizingMethod=’crop’);”></div>

The Internet Explorer team were making noises that 32-bit PNG support would be baked right into the browser in version 7. Fantastic. Actually, IE7 is backwards compatible to support the directX filter method, but also supports:

<img src=”my32bitPNG.png”>

Great. right? No.

Actually, the two methods are NOT equal.

In fact, the new, baked in method is decidedly poor, because you cannot combine it with opacity effects, wheras you still can with the old method. [gong!]

Unfrickenbelievable.

What happens when you try to apply opacity to a 32bit PNG that was referenced the simple way? Black blotches, fringed edges, and general ugliness.

IE7 32BIT PNG WITH OPACITY APPLIED (NATIVE)

IE7 32BIT PNG WITH OPACITY APPLIED (DIRECTX FILTER)

Did we just lose functionality? Insert outrage here.

| Del.icio.us

This entry was posted on Monday, July 16th, 2007 at 10:57 pm and is filed under ajax, User Interface, web development, ie6, ie7. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.