King PNG

I was mulling over the changes coming up in IE7 and what was the happiest new feature. I think the one that gets me bouncing up and down is the support for full alpha channel in the PNG image format.

I think that up to now the format has never caught on in a big way, as the main benefit is having full control over the alpha channel and being able to layer up semi-transparent areas, and IE6 would not natively support the opacity specified in the image.

There were a few workarounds – more can be read on AListApart. These are based around using the AlphaImageLoader proprietary filter in Internet Explorer. However doesn’t provide the kind of flexibility you can usually get when you specify CSS background properties – for example, getting to control horizontal and vertical tiling behaviour.

So with IE7, all of the major modern browsers will now support the alpha channel in PNG format (cheering from the stalls). This all sounds a bit geeky and dull so far, but this makes the life of a designer much more exciting.

We’ve been able to do a certain amount with transparency up until now, but generally by faking it, where images happen to match up perfectly to give the illusion of transparency. However, this would mean that moving things around too much would require cutting new image assets.

No longer! We can now see a point where the general browsing populous will all be rendering PNG images correctly, which means that we can do some very cool things. I’ll try to whip up some examples in the near future – feel free to add links to any showcase sites that you’ve come across.