The PNG problem finally resolved
Filed under: web development
Number of comments: 
Number of trackbacks: 
Tagged with: There is no way of making PNG images that match CSS colors in all PNG-supporting browsers. This reduces the usefulness of the otherwise excellent image format. If the image colors and the colors defined in a style sheet need to match, it is safer to use GIF or JPEG.Henri Sivonen in The Sad Story of PNG gamma "correction"
Thanks to Nick on the Stylegala forum I finally got an answer to the most agonizing problem in web design I've encountered so far: my PNG's not behaving right in several browsers. I've set up a little demo for you to 'enjoy' this problem.
I'm a container with #CDCDCD as background color defined in a style.
I'm a div with a PNG with the same color as a background! Not quite the same color eh?
The problem I experienced (including on this site until this morning) was the fact that colors in PNG's were rendered differently than CSS colors. For example if you place a PNG file with a plain color fill in #CDCDCD, it will render slightly differently than a page element that has it's color set to exactly the same #CDCDCD in your CSS. It almost drove me insane and various designers I've asked didn't have any explanation as for why this was happening. There's something really fishy going on with the gamma correction so it seems.
There is currently NO WAY to fix this problem. Therefore the advise is to not use PNG's for any elements in your design that are tightly related to elements that have matching colors assigned to them through CSS. This website used to have this problem in the right margin where the purple column didn't quite match the background color of the elements in it. Changing the background image to a gif fixed this problem. A valuable lesson. Thanks again Nick!
At 11 April '05 - 13:52 stefan wrote:
At 11 April '05 - 18:00 Ryan Brooks wrote:
What about PNGs encoded in Web Safe colors?
-Ryan
At 11 April '05 - 18:59 Marco wrote:
At 11 April '05 - 19:34 jess wrote:
Give it a shot:
http://entropymine.com/jason/tweakpng/
At 11 April '05 - 19:51 Marco wrote:
At 11 April '05 - 22:42 marten wrote:
imagemagick, anyone? :P
At 12 April '05 - 04:20 Ryan wrote:
-Ryan
At 12 April '05 - 04:36 jess wrote:
http://mrclay.org/web_design/pngs_and_gi..
At 14 April '05 - 00:25 Max wrote:
At 17 April '05 - 19:30 Peter Odding wrote:
Well, good to know you’re problem is fixed…
At 23 April '05 - 13:30 Trenton wrote:
But that TweakPNG program looks like it may do the trick!
At 10 April '06 - 15:00 Erick wrote:
Timon Reinhard:
Thanks for the info about pngcrush! I’ve written a simple GUI for the tool to make it easier removing gamma chunk from multiple files (under windows). You can drop your PNG-Files to the .exe and they’ll get crushed (original files will be replaced). Hope this is kind of useful for someone…
http://www.herr-reinhard.de/media/files/..
And also thanks guys, for the other software suggestions, – TweakPNG – ImageMagick
But of course this doesn’t really fix the problem, according to that “Sad Story” article since in previous browsers like Opera and Mac IE, it still fails. But who cares. It’s IE6 that was killing me.
At 10 January '07 - 07:12 tommy wrote:
thank you very much for the interesting links to the programs. :)
I’ve found out, that if you want to create an 50×50 pixel one color background pattern for an website element, you could simply copy
At 10 January '07 - 07:14 tommy wrote:
thank you very much for the interesting links to the programs. :)
I’ve found out, that if you want to create an 50×50 pixel one color background pattern for an website element, you could simply copy and paste the pattern from Photoshop to the freeware utility IrfanView (http://www.irfanview.de/) and save the pattern from that tool as an PNG.
The gamma information isn’t saved and you must not delete it manually with the mentioned tools. But unfortunatly it’s a windows program, so it isn’t suitable for you guys with a MAC or Linux Box :/
Blessings,
tommy
P.S. Could you delete the previous post please? There was an amperesand in it and it isn’t complete. Sorry for double posting :/
At 30 April '07 - 10:11 Matteo wrote:
I’m on mac and i solved this problem downloading pngout ( there’s a version with GUI for windows ) and using this shell script with automator:
for f in “$@”
do
/Applications/CLI/pngout “$f” “$f” -y
done
so you select every image you wanna fix and right click, automator -> fix png gamma and boom!
At 17 November '07 - 00:35 Trent Tompkins wrote:
http://www.trenttompkins.com/Downloads/T..