Joseph Bloggs

Online home of Joseph Talbot: Little Briton

Main menu

Problems with png colour fidelity in IE

13 September 2007 - 9:56am -- Joseph

Apologies for two geeky posting on the trot, but if I don't blog solutions to problems when I find them, I end up having to search for them again sometime down the road...

I recently encountered a problem with the colour fidelity of a png image when displayed in IE - the background colour of the image was the same as the background colour of the surrounding background of the HTML element, but the two didn't match up.

This confused me for a while, on making inquiries to colleagues and Google, I worked out the following:

It seems like the colour mis-match was caused by gamma-correction within the png, as detailed here: http://hsivonen.iki.fi/png-gamma/.

The solution seems to be to omit the gamma-correction info from the png (though this may cause problems in some browsers such as older versions of Opera and Safari [again, see http://hsivonen.iki.fi/png-gamma/])

I found a page that describes a technique for omitting the gamma correction in a png when exporting from Photoshop.

The actual solution described didn't actually work for me (possibly because I was on a PC and the solution was carried out on a Mac), however a comment in that page suggesting using a plugin for Photoshop called superPNG, which I did, and it worked.

This leaves me with non-gamma corrected png and a page which looks fine in IE6, IE7 and Firefox,(though may fail on older versions of Opera and Safari - not tested that yet...)

Well, that's what I learnt, so tell me what you know...

Comments

Oops,

well spotted Mike, that should have read 'a plugin called superPNG ', fixed now,

cheers!

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.