This blog is outdated. Check out my website at http://cem.re or my work blog at http://cem.re/tumblr.

can't use it

a blog by Cemre Güngör

Optimizing 8-bit Alpha-PNGs for IE6 (prevent jaggedness with anti-aliased borders)

Alpha-transparent 8-bit PNGs are great: they support variable transparency, and degrade gracefully in IE6. Thus it becomes possible to support such images with one file without any IE hacks.

Here’s a SitePoint article benchmarking Alpha-PNG’s performance.

There is a downside though, to alpha-PNGs. If you have anti-aliased borders in an image, exporting the image as Alpha-PNG might cause strange jagged corners on IE6:

The reason is this: the border consists of many semi-transparent pixels, which have very little transparency. Thus we don’t usually think they are transparent at all, they appear dark in the original file. However as IE6 ignores any semi-transparent pixel no matter its level of transparency, they become gaps.

To fix this, simply copy the shape, use a “hard border” instead, and put the anti-aliased one on top of it. It doesn’t look much different than the original, but as the pixels with little transparency will be covered by the “hard border”, the jaggedness will be gone.

Left: Anti-alised border, Right: Hard border

Below, the first circle only has an anti-aliased border, the second one has a hard bordered copy behind it too.