When is the right time to use PNG?
- March 1st, 2007
- Posted by Stewart
- Permalink
- 4 Comment(s)
For a long time designers have had to hold off using the PNG image format on the web because of Internet Explorer’s poor support for it. So now that IE7 is publicly available and support has been added - can we use them now? What else do we need to know before using the image format that was designed for the web?
Progress, finally
So after years of complaining; Microsoft have finally pulled their fingers out and implemented proper support for the PNG format. So how long do we have to wait for IE users to update? And will they even bother? So far the statistics on the uptake for IE7 sounds impressive but there will always be the some web users and companies that will use older version for many years to come. So what can we do now?
Using PNG today
If you haven’t followed the issues with PNG and Internet Explorer, let me fill you in. Internet Explorer introduced “support” for PNG in Internet Explorer 4; By “support” I mean, they would display on the screen as part of a web page; and IE4 knew what they were. It didn’t however support the alpha transparency feature that made PNG so great.
Firefox, Safari and Opera have always worked great with PNG format which has meant that designers could finally see their designs with true alpha transparency but either can’t use them or have to find work arounds for Internet Explorer.
You can use PNG files on Internet Explorer if you don’t want to use the alpha transparency, but be aware: Internet Explorer doesn’t render the images 100% correctly. Some of the colours will not look exactly as you intended.
Taken from libpng.org: inconsistent/broken gamma support;2 no ICC-profile (iCCP) support; no color-correction support; progressive display of interlaced images (replicating method); broken OBJECT support in version 4.x;3
So what are the options?
For this site I decided to use PNG files as they compress well and can support alpha transparency. For Internet Explorer 6 and less, I decided to use conditional comments to show them an alternative stylesheet that substitutes the PNG files for a GIF. But what if you just want to use them and forget about them?
Well how about WebFX’s PNG Behaviour for IE? Or Using PNG as background images? For now, at least, I think it’s time to start experimenting with PNG images and using work-arounds for the lesser versions of Internet Explorer like those mentioned above.
Resources
- Browsers with PNG Support - http://www.libpng.org/pub/png/pngapbr.html
- WebFX’s PNG Behaviour - http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
- Internet Explorer’s Alpha Filter - http://msdn.microsoft.com/…/filters/alphaimageloader.asp
Comments
4 Responses to “When is the right time to use PNG?”
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 …
Note the use of *html to provide instructions to IE6 only :-)
Thanks for that Andy. That technique is documented above:
http://www.themaninblue.com/writing/perspective/2004/06/18/
From experience, if you use interlaced PNGs the color displays correctly in IE.
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.
Leave Feedback