Poor Poor PNG

As web file formats go the PNG really has a hard time of it. On the surface it looks like the best options for many many types of web imagery - it’s small and it supports full transparency. Delve a little deeper and things dont look so rosy.

There has been much written about the problems with transparency and IE6, and thanks to a vast number of fixes, and the release of IE7 that issue has almost been sorted. Instead I’m going to talk about another problem that PNG users face, which I had not run into until recently.

A client recently emailed me to let me know that there was ‘grey boxes’ appearing around some of the images. Thinking this was our old friend IE6 PNG transparency (non)support, I happily told them to refresh their cache and look again (this was a test on the server, and not 100% completed at the time). But Alas, the boxes remained in Internet Explorer PC, and most worryingly, on Safari on the Mac too, but appeared fine on Firefox on PC. It soon dawned on me that the images in question were PNGs, but not ones that I had applied any transparency to.

This was a different problem. After much confusion, and a bit of screen-shotting I realised that the different browsers were displaying actual different colours. According to this it’s because of gamma correction, and how different browsers correct the colours differently

The easy solution is to use a GIF in it’s place (this is what I opted for), but it is a pity to be forced away from the usually smaller PNG file. Apparantly there are other ways to fix it and continue using PNGs, or alternatively you could use a PNG background image, but obviously this isnt always ideal

Filed under: CSS/XHTML, Design, Web by Ralph