Comments on: When is the right time to use PNG?

By: Ram

Ram — Sat, 03 Mar 2007 01:56:53 +0000

PNG is a great format, but has some major support issues across all browsers/OSs when it comes to the whole gamma correction/colour consistency thing. Take a look at:
http://www.libpng.org/pub/png/colorcube/

Apart from the colour matching issues I think it’s definitely time to start utilising them more, just don’t expect them to match your CSS colours exactly in all cases.

By: Z

Sat, 03 Mar 2007 01:41:39 +0000

From experience, if you use interlaced PNGs the color displays correctly in IE.

By: Stewart

Stewart — Fri, 02 Mar 2007 09:25:19 +0000

Thanks for that Andy. That technique is documented above:
http://www.themaninblue.com/writing/perspective/2004/06/18/

By: Andy

Andy — Thu, 01 Mar 2007 23:45:58 +0000

There is a ‘hack’ that will make PNG’s work in all versions (as well as validate). You use a totally transparent gif for the image (with the height and width set in the img tag) and give it a unique id. Then in the css you swap the image out for the real png file while adding support for IE. The down side is that you need a unique id for each PNG image, so its only really convenient for a big main image that you want to have transparency on. Sample code … and then in CSS …


#alphaImage2 { height:190px; width:230px; background-image:url(img/logo.png); }
* html #alphaImage2 { background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/logo.png',sizingMethod='scale'); }

Note the use of *html to provide instructions to IE6 only :-)