PNG 8 - The Lost Format

[Michael Morris]

The dreaded Halo effect on a GIF. We've all seen it. Switch the background of your forum ever so slightly and prepare to cringe. GIF has served us well, but in the end it's a technology developed when the Commodore 64 was still the most popular computers in the world. It is old technology, and it shows.

GIF is also owned by Compuserve and in the mid 90's they tried to pull the format out from under everyone's feet with trademark lawsuits ad naseum. In this turmoil PNG was developed.

If you're into history read on here (http://www.libpng.org/pub/png/pnghist.html)

In the years that have followed PNG has come to be supported on every major browser to some degree. IE can display PNG's, but it messes the image up horribly if it is 32-bit and has an alpha channel (that is to say, opacity). The thing is, PNG-32 isn't the only variant of PNG. There are two other major branches - PNG-24 which has no transparency or alpha (that I know of) and PNG-8, which does but is limited to a 256 color palette.

PNG-8 has the distinction of quietly working in every major browser - but it's often overlooked because of it's big brother PNG-32. Still, if you want to get rid of GIF's horrid halo effects it's probably the best answer out there since unlike PNG-32 you know it will work in IE6 (and 5 for that matter).

PNG8's are also quite a bit smaller than PNG32's and not noticeably larger than an equivalent GIF. It's worth looking into.

[davidw]

I've not worked (much) with 32-bit PNGs, but I have worked mostly with PNG-24 and have seen the light-blue effect with that in IE as opposed to the non-transparancy. There are fixes out there that I've seen, but the ones I've implemented to ensure IE 6 and 7 render the format properly have caused a slight delay in processing the image and therefore showing the light-blue "haze" or "transparency overlay" for a part of a second - enough to be an annoyance if you work with them enough.

My .02 cents for working with PNGs.

[Michael Morris]

Originally Posted by davidw

I've not worked (much) with 32-bit PNGs, but I have worked mostly with PNG-24 and have seen the light-blue effect with that in IE as opposed to the non-transparancy. There are fixes out there that I've seen, but the ones I've implemented to ensure IE 6 and 7 render the format properly have caused a slight delay in processing the image and therefore showing the light-blue "haze" or "transparency overlay" for a part of a second - enough to be an annoyance if you work with them enough.

My .02 cents for working with PNGs.

Which is why I advocate using PNG8. IE 5.5, 6 and 7 display this form of PNG without a problem. IE 4 and 5 simply drop the colors which have an alpha value - meaning the drop shadow disappears - there's not grey box effect.

[RedTyger]

PNG 24s can do opacity, unless my copy of Photoshop is mislabelled.

Originally Posted by davidw

I've not worked (much) with 32-bit PNGs, but I have worked mostly with PNG-24 and have seen the light-blue effect with that in IE as opposed to the non-transparancy. There are fixes out there that I've seen, but the ones I've implemented to ensure IE 6 and 7 render the format properly have caused a slight delay in processing the image and therefore showing the light-blue "haze" or "transparency overlay" for a part of a second - enough to be an annoyance if you work with them enough.

My .02 cents for working with PNGs.

There is a CSS-only solution which works well, particularly where the PNGs are used for layout purposes. It has no negative side effects, but does have the caveat of not always being suitable because it transfers the PNG to being an element's background image. Works back to IE5 or IE5.5, something like that. I'll post it if you need it.

Originally Posted by Michael Morris

Which is why I advocate using PNG8. IE 5.5, 6 and 7 display this form of PNG without a problem.

Actually they do, IE sometimes renders the palette off by a shade or so, depending on your image. If you're trying to precisely match a shade then it can show up with the colours not matching.

Run through a few of the tests on this page in Firefox and a version of IE. If you only see a one-colour box, the browser is rendering correctly, or you can see the effect here. That screenshot is from the beta, I don't if it was fixed in the gold release. I'd appreciate knowing actually!

[Michael Morris]

Originally Posted by RedTyger

PNG 24s can do opacity, unless my copy of Photoshop is mislabelled.

They're not supposed to. From what I understand of the format PNG24 is 24 bit true color without alpha channeling. I'm probably wrong though.

There is a CSS-only solution which works well, particularly where the PNGs are used for layout purposes. It has no negative side effects, but does have the caveat of not always being suitable because it transfers the PNG to being an element's background image. Works back to IE5 or IE5.5, something like that. I'll post it if you need it.

I have yet to see a CSS approach that prevents grey-box-ville with PNG32 images, particularly on complex layouts with multiple PNG's on top of one another.

Actually they do, IE sometimes renders the palette off by a shade or so, depending on your image.

:ahem: MONITORS can do the same regardless of browser. IE is guilty of many sins, but being off a shade or two in nowhere among the worst of them. I honestly don't care if layouts depricate in IE, as long as they do so gracefully.