March 7, 2011

PNG Color Problem in Internet Explorer

PNG is the most versatile image file format for web graphics. The PNG image file format:

  • Supports palette-based, grayscale and RGB images
  • Features loss-less data compression, full alpha channel and interlacing
  • Provides higher compression when compared with equivalent GIF image
  • Is not subject to any patents

Unfortunately, PNG images often display inconsistently across different browsers. Some browsers incorrectly implement auxiliary PNG features; or do not implement them at all. Internet Explorer is known to have numerous problems with PNG images, the two most annoying ones are:

  1. No alpha channel transparency support — IE6 and earlier render transparent regions as solid gray color when the PNG uses alpha channel transparency.
  2. Inconsistent gamma support — IE8 and earlier display PNG images with gamma information differently from HTML/CSS colors, unlabelled images and PNG images with sRGB information. In simple words, at times it will render the image darker than expected.

In this article I'll show you how to work around the PNG Gamma "Correction" problem in Internet Explorer. The following screenshot demonstrates the problem that is otherwise harder to describe in words:

Darker PNG (with gamma information) in Internet Explorer

The left hand side shows what the original Adobe Photoshop document looks like. The right hand side shows how the resulting image (exported as PNG) renders in Internet Explorer 8 against a solid CSS background color. You can clearly see that Internet Explorer is rendering the PNG darker than expected.

PNG images saved via Adobe Photoshop or any other graphics editing software are highly likely to contain a "gAMA" chunk that contains gamma correction information for the image. When this information is present, Internet Explorer will attempt to adjust the colors of the image accordingly. The correction might indeed be correct; but the other elements in the document (e.g. HTML/CSS colors, GIF and "unlabelled" JPG images) are NOT gamma-corrected by the browser. The resulting image will therefore appear darker than other elements in the document that are supposed to be the same color.

The solution is fairly straight forward: if your graphics editing software can be told to omit gamma information while saving images, do so. If not, there are numerous tools that allow you to do just that. TweakPNG is a low-level utility for examining and modifying PNG image files and you can use it to remove gamma (and other color space information) chunks:

Removing gamma chunk from PNG using tweakpng

After removing the gamma (gAMA) chunk from the image, this is the result:

Correct PNG (with out gamma information) in Internet Explorer

Note: It is probably safe to remove all color space information chunks — this saves a few bytes anyway.

References

  • TweakPNG can be downloaded from here.
  • The Internet Explorer's alpha transparency support problem is discussed here, here and here.
  • The technical detail about the inconsistent gamma support in Internet Explorer and other browsers is discussed here and here.
  • Tools that can optimize PNGs that are not optimally optimized: