Browser test of gamma correction of alpha-blended colors

Most modern web browsers support both alpha blending (partial transparency) and gamma correction (platform-independent colors) when displaying PNG images. But few if any behave perfectly correctly when they need to perform both operations on the same pixel.

The test

Please examine the following chart. A truecolor display is recommended for this.

All the images (horizontal bars) should exactly match the last two reference images. To verify that the reference images themselves are correct, check the "PNG sRGB gamma=1/2.2" and "GIF" tests on my gamma correction test page.

Images 1-4 are all pure black RGBA images with varying levels of transparency, on a white table background.

If your browser does not fully support alpha transparency and gamma correction and background images (i.e., it does not pass all of my alpha tests and gamma tests), some of the tests here may still be valid, but passing them does not mean as much.

The reason images 2-4 should look identical is that gamma does not affect pure black pixels, regardless of their level of transparency.

Possible results

This is correct. I don't know of any browsers that do this.

(Update: It's been reported that the graphical version of Links does this, though it doesn't pass all the other transparency tests.)

This is pretty good, but technically it's wrong. It probably indicates that gamma correction is being done prior to, and independently of, the calculations for alpha transparency. Unfortunately, the correct procedure is not that simple.

(I don't know the technical details, but it could be that it's not possible to do it right without a significant performance penalty. If the video system (video drivers and hardware) that does the alpha blending doesn't support a way to specify a gamma value, then the only solution might be to read the screen, and calculate the correct color for each pixel, all in software.)

This is the result I get with Netscape 6 for Windows, and Opera 6 for Windows.

Internet Explorer (v4-6) for Windows. (Sigh.)

It gets test 4 almost correct, but only by accident.

This is typical of a browser that doesn't support transparency or gamma correction at all.

This result is from Netscape 4 for Windows.

If a browser passes tests 2 and 4, but fails test 3, it's probably the result of a bug in libpng. Libpng decides gamma correction is unnecessary in some cases where it turns out to be necessary. (The bug was fixed in libpng 1.2.2beta2.)

This result is from Opera 4 for Windows.

It's pretty bad when not even the non-transparent PNG and GIF colors are displayed correctly. The usual problems when combining gamma correction with alpha transparency are very minor by comparison.

This result is from MSIE 5.1 for Mac. Safari 1.0 reportedly does the same thing.


If you get a result not shown above, and are willing to email me a high-quality screenshot, I'll consider putting it here.

Supplemental tests

If your browser passed all of the above tests, then we'd better also make sure it works with pixel colors other than black, and background colors other than white. The top half of each of the three tests below is what your browser does, and the bottom shows how it should look. (Gamma=0.3 in the test images. The reference images are in GIF format.)

  (white background) 

  (gray background) 

  (black background) 

Test page by Jason Summers.

< < other tests