Welcome, Guest

Please login or register



Sponsored Links

Fixing the PNG Color Problem in IE

PNG images have been the long-term answer to all graphical woes in the web design world for years. But problem after problem arises in the use of PNGs, which is why most designers are still resorting to GIFs or JPEGs for their web graphics. For many years the problem wasn’t the PNG format itself, but the lack of browser support towards it. However all that has changed now and all major browsers including Internet Explorer, Firefox, Netscape, Opera, and Safari have PNG support.

There has, however, been deep-seated problem in that few people could ever figure out why PNGs appear darker in IE and don't match CSS colors (and this problem still exists even with the beta release of IE7). This has discouraged many people from using PNGs at all.

But there’s a fix to this problem, though it sacrifices one of PNGs greatest capabilities! What you will need is a program like TweakPNG (yes, it's free), which allows you to edit PNG chunks and compress PNG file sizes much better then Photoshop.

Using TweakPNG, simply open up your PNG image and remove the gAMA chunk. This will totally fix your problem of PNG images not matching CSS colors in IE. Also remove the pHYs and iCCP if you’re concerned about file size (and remove cHRM if you’re not using any transparency), as those chunks aren’t needed to get a PNG to display correctly in the different browsers.

So what’s going on? Well, I advise you take a look at the following link. It will explain what we just removed: PNG (Portable Network Graphics) and Gamma

Q: “That’s so cool! I wish GIFs or JPEGs could do that! But why did I have to remove gAMA in order to make PNGs look right in IE?” Now I can’t take advantage of it!!!
A: Good question and simple answer. IE doesn’t have a proper gamut setting, so it misuses the gAMA information that the PNG provides and displays something darker then it’s supposed to be. So if you remove the gAMA chunk you'll fix the IE problem, but once again your images will act like GIFs or JPEGs when it comes to how they act across systems with different gamma settings. A shame really, as it’s a really cool feature!

- Tutorial written by Heri

Automatic Translations: Translate Into French Translate Into German Translate Into Italian Translate Into Spanish Translate Into Portuguese

Last 5 User Comments

There are no comments for this tutorial yet.
You can place a comment by clicking here.
Amazing Font Pack!

Featured Tutorialsmore

Metal & Organic Li...
Metal & Organic Li...
- Adobe Photoshop -
Anti-Aliasing Inte...
Anti-Aliasing Inte...
- Adobe Photoshop -
Light Swirls
Light Swirls
- Adobe Photoshop -
Blender & Yafr...
Blender & Yafr...
- Blender 3D -

Remember Me

Lost Password? || Register


Special Options
Printer Friendly Version
Forum Threads

hello guys!..i`m back
Author: yusreey
Posted: Oct 25th, 9:09pm
Activity: 1 replies, 8013 views
Author: anderkober
Posted: Jul 14th, 3:09pm
Activity: 1 replies, 4827 views
 Re: 3ds Max Tutorials for Beginners
Author: 3DSMaxresources
Posted: Feb 22nd, 4:29pm
Activity: 0 replies, 5292 views
Delete Account
Author: Neo824
Posted: Oct 18th, 7:47am
Activity: 1 replies, 5799 views
Author: unleash
Posted: Jul 02nd, 12:37pm
Activity: 3 replies, 6434 views
Help Please :)
Author: Roosta
Posted: Mar 25th, 5:08am
Activity: 0 replies, 7067 views
thank you
Author: HypepapyHer
Posted: Mar 24th, 9:18pm
Activity: 1 replies, 4823 views
 Deactivate Account
Author: jerinian
Posted: Oct 02nd, 12:16pm
Activity: 1 replies, 5630 views
Author: supertackyman
Posted: Sep 12th, 3:56am
Activity: 2 replies, 7665 views
Back again and with free webhosting :)
Author: ngz
Posted: Aug 14th, 4:50pm
Activity: 0 replies, 5080 views
Cartoon Crab 6 Legs Walk Run created in Blender
Author: patricia3d
Posted: Jun 19th, 1:58pm
Activity: 0 replies, 5990 views
HTML Form Post Array to PHP
Author: Space Cowboy
Posted: May 25th, 3:18pm
Activity: 1 replies, 42360 views
Forum Threads

--- Site Resources ---
Total Tutorials:212
Total Downloads:    441
Total Fonts:    4669