The article referenced seems to have been written with a misunderstanding of what gamma information in images is for. I have sent the author some information on what is wrong with the assumptions made in that article, and paraphrased this below.
The purpose of gamma correction is not to make sure that #bfe024 comes out the same in the image and HTML. It's to make sure that the colour #bfe024 represents on your screen when you save the image is preserved when the image is displayed on a different device. If your browser doesn't happen to agree with the program that saved the image as to what the effective gamma should be, you won't get matching results.
Browsers complying with CSS 1 should know something about gamma. They display CSS colours in the sRGB colourspace which has an effective gamma of 2.2.
Your browser will use whatever information is available to it to get your display gamma so that it can adjust the CSS colours so that they display
correctly in the sRGB colour space. A browser correctly implementing PNG will also adjust the colours so that they display correctly - the same as on the device where they were created, not necessarily in sRGB.
There's also the issue that the program that is saving the PNG might have a different concept of the effective display gamma than the browser.
Here's what really happened with the test images, I opened them up in a hex editor and read off the gAMA chunk to get this info (there's probably a nicer way, but this was convenient):
test2.png (Photoshop) - Gamma: 0.55
test2_fireworks.png - No gamma information.
test2_gimp.png - Gamma: 0.45455
The reason the Fireworks image did so well was that the browser was simply applying its gamma settings to the image colours (the same gamma settings it's applying to the CSS colours). This is because Fireworks failed to store any gamma information, which is the correct thing to do if you're trying to match PNG and browser colours, and the wrong thing to do if you're trying to test PNG gamma support.
Photoshop seems to have assumed, or discerned somehow, that your monitor's effective display gamma is about 1.82 (that is, 1/0.55) and set the gamma chunk in the PNG to reflect this. If that's right, then the image should look the same as it did on your display as when you view it on other
displays. 1.82 is dark compared to 2.2. It displays a bit lighter than it should on the web page, as the PNG gamma is brightening the colours to fit them into the sRGB space. This is the expected behaviour given what we know. Safari's implementation of PNG gamma appears to be broken (!), despite getting the colours to match as it seems to have not exhibited this behaviour.
The Gimp assigned your display a gamma of 2.2, and so wrote a gamma of 0.45455 (which is 1/2.2) into the file to compensate. 2.2 happens to be the same as the gamma that sRGB assumes. Note that the Gimp's PNG passed your tests on all but the IE browser. (I wouldn't use the results in IE against the PNG format, as I think Microsoft's "implementation" of PNG has serious problems - count it as a reason against using the IE browser,
there are better and freer implementations of the web standards these days.) As you have probably guessed by now, the reason the Gimp's image did so well, is because it decided that the effective gamma should be the same one that sRGB (and hence CSS) uses.
All that being said, the test itself was probably not really testing the effectiveness of the gamma support for PNG. (In one case, the PNG didn't even contain gamma information.) An actual test of PNG's gamma capability would perhaps use different display devices to show whether images can retain their colours exactly from the designer's screen on one platform over the web to possibly another platform.
If you want to test matching against the CSS colours, first you have to check that the CSS colours are being correctly handled (i.e. Gamma
corrected into the sRGB space), then if they are you can test that the browser is doing the right thing with different gammas (set the effective gamma to 1.8 and see if it gets brighter than the CSS colours, set it to 2.5 and watch it get darker). You might also check that the gamma that the browser is applying to the PNGs is the same as that for the CSS colours when no gamma information is present in the PNG.
So if you want the colours in your image to match the colour space that's used by the browser, probably the best way to do this is to simply tell
the program that you're saving the PNG with to not store gamma information. Apart from that, if you really must put a value in there, tell the program that you want an effective gamma of 2.2 to match the sRGB colourspace. If you want the colours in your image to match the ones on your screen, tell your graphics program what your monitor's gamma is, and let it save correct gamma info into the file.
For more information on this, (if I didn't already talk your ear off about it) check out the following references:
PNG Gamma Tutorial
CSS Colour Units
[ Parent ]