PNGs not quite right in Internet Explorer 8


I recently ran into a problem where PNG images were not being rendered properly in IE8, but only in IE8.  All other browsers displayed the images properly.  By “not being rendered properly” I mean that the PNGs were just slightly darker than the color they should have been, even though the image itself showed the proper color.  The the image below is an example of this; the left and right areas of the tabs are just slightly darker than the middle area.

SNAGHTML4897b8ef

At first I thought was related to the PNG transparency not being rendered properly and figured that I would take it up with the Graphic Artist when time allowed.  However, after walking away and then coming back to it, I was able to track down the real culprit: gamma correction.  It seems that the gamma information is included in PNGs to allow for a more accurate rendering of graphics, but that it is ignored by most browsers – except Internet Explorer 8.  A detailed explanation of the how and why of this can be found on Trevor Morris’s blog though his post was written prior to IE8, the issue was the same.

After spending some time in Paint.Net (I don’t have access to Photoshop) I was unable to come up with a way to remove the gamma from an image.  The Paint.Net forums suggested copying the image information into a new image and saving that, but that did nothing.  Fortunately, a bit lower in the same thread was the recommendation of a utility called “TweakPNG” and that did the trick.

All I had to do was simply save the image in my Image Editor, open it with TweakPNG, delete the gAMA information and hit Save.  Now my PNGs displayed correctly, even in IE8.

image

Advertisements

Posted on November 7, 2011, in Development. Bookmark the permalink. 1 Comment.

  1. Dave, you know them times when the process of finding a problem, searching for a solution and applying the fix happens really fast and smooth.. Yeah. I literally just found a bad PNG in IE8, googled “images are rendering darker in ie 8”, skim read your post and hit the link to TweakPNG.. Open the archive, open the program, open the image, delete the GAMA, save the image, refresh IE 8 – JOB DONE! THANK YOU!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s