PNG 24 Round Up
November 27th 6 comments
PNG24’s are the answer to all our prayers. Now I know what you’re thinking: “PNG’s have been around forever…what’s the biggie?” Well the biggie is that IE 7 is now supporting PNG24’s which means that we can start doing some awesome stuff without having to hack our code to shit! Unfortunately it’s still going to take a wee while for IE 7 to filter down to most users machines so we’ll still have to do a little bit of hacking for our dear friend IE 6
History
PNG’s were created to improve upon and replace the GIF format. Back in around ‘95 Unisys announced that it would be enforcing software patents on the compression algorithm used in the GIF format. Needless to say this pissed off a lot of people. This is when PNG was born. Originally the acronym was a recursive one (my favorite types of acronyms) “PGN’s Not Gif” but now it’s just “Portable Network Graphics”.
GIF v PNG
Not only was there that whole patent issue with the ubiquitous GIF but the GIF was limited to a palette of only 256 colours…As web designers we needed more! What use is having a VGA monitor that’s capable of millions of colours when your images can only contain 256…lame-o!
Probably the coolest thing about the PNG is that it completely 0wns the GIF when it comes to transparency. PNG’s have alpha-channel transparency. What this means is that you can have semi-transparency. So having those ultra cool2.0 drop shadows on gradient backgrounds become easy as!
The IE Problem
As with most things awesome on the web IE was a little slow in the uptake. It’s taken bloody years for IE to come to the PNG party.
IE 6 can render PNG’s but completely falls apart when it comes to the alpha-transparency rendering of PNG 24’s. The PNG 24 will display with an unsightly grey background clearly showing you the image boundary. Nasty.
The IE Solutions
Luckily for you (and me) there is a solution to the alpha-transparency issue. IE comes with a proprietary CSS filter that allows for alpha-transparency support:
[source:css]
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’test.png’, sizingMethod=’scale’);
[/source]
Sexy, no?
So what exactly are we meant to do with that?
Javascript for PNG Backgrounds
With modern web design has come modern coding techniques. In particular the CSS Image Replacement technique. This involved replacing the content of an element with a background image.
Drew McLellan wrote a great piece of javascript that dynamically applies the above CSS filter to background PNGs. I’ve used this solution on numerous occasions to great success. Just beware that your page load can become quite sluggish therefore I suggest you use Conditional Comments to only include the code in IE 6 and below.
HTC’s for inline images
Back in ‘98 when DHTML was all the rage I used to frequent this website. It had loads of javascripty goodness. Its main focus was on harnessing some of the hidden features of IE. Remember that back then the hottest browser was IE 6 so learning all the nifty features was high on most web designers agendas.
One of the coolest things on WebFX was the PNG HTC behaviour. This is a Hypertext Component that you drop into the head of your site and then add the following bit of CSS your css file:
[source:css]
img {
behavior: url(”pngbehavior.htc”);
}
[/source]
This is such a great tool that MS themselves suggest you use it to combat their lack of PNG support.
Server-side solution
No need to jump to the comment form and remind me that the above two solutions rely on javascript being enabled. Here’s a server side solution that may just tickle your fancy.
Justin Koivisto has written an excellent PHP script that makes PNG’s work in IE 6. This solution is almost identical to the javascript solutions - the main difference being that it doesn’t rely on dodgy client-side browser sniffing.
Warnings
Some of the above require that your browser has javascript turned on. About 98% of IE users have javascript on by default…so this should be an issue.
But why are my PNG image links no longer clickable?! This is a z-indexing issue. The scripts actually overlays an image above the inline one. The solution to this is to add the following CSS to the link in question:
[source:css]
position: relative;
z-index: 100;
[/source]
The End
I’m hoping that in the not to distant future this article will become redundant. Please people, start using a modern browser it’ll make the web better for everyone!
If you have any other ideas or solutions that I may have left out please leave a comment to let me know.
Much Love,
Darren
Very choice post man, I’ll be starring this one in Google Reader. PNG-8 kills GIF but I still have reservations about PNG-24 format and its lack of image optimization you can perform. It’s lossless compression is great, but the bigger file size’s aren’t.
Yeah - the lack of compression on png 24’s a slight concern…you just have to be conscious of where and how you use em, i spose…
Nice of you to put the code above together in one article. I’ve seen the PNG format also be slightly discolored in IE6. Is this due to the alpha channel as well?
I’m not too sure, but judging by IE6 overall badness in the PNG area I’m not surprised in the least!
This is an article about PNG overlay and IMG element:
http://www.tjkdesign.com/articles/png_overlay_with_no_extra_markup.asp
I got a problem with the position: relative; z-index: 100; with the link but with the text not with images.
see the page on the right sidebar there are boxes with a text in blue: http://www.studiopixell.it/web/ssm/interna.php?id=3&pag=certificate
how can i solve this trouble?