The PNG Gamma Dilemma

PNG  (pronounced ping) is a remarkable image format that supports such features as: 16-bpc true color or grayscale, alpha channels, interlacing (progressive display), and lossless compression! In addition, the PNG format allows applications to embed gamma information to correct for variations in brightness (gamma) on different platforms. This is great news for graphic designers who want their images to look good regardless of where they're viewed; but ironically, it's also one of the obstacles preventing more universal adoption of the PNG format for the Web.

The problem arises from the fact that browsers have traditionally treated the RGB values specified in CSS (and HTML), GIF and JPEG as identical (numerically and colorimetrically). With PNG, however, the stored gamma information is used to "correct" the RGB values prior to displaying the image, which means that they won't match other design elements when viewed in certain browsers. To complicate matters even further, not all browsers interpret this information in the same way: some ignore it completely, while others apply an arbitrary gamma adjustment.

Contrary to the CSS2 specification , which states that CSS color values refer to the sRGB color space , the majority of browsers simply display CSS colors using the system color space. Nevertheless, it's still reasonable to expect that the colors of an sRGB-labelled PNG would — or should — be treated consistently with CSS colors. Once again, this is not necessarily the case for all browsers.

For PNGs that appear in isolation, this gamma discrepancy mightn't even be noticeable; but when they're combined with other design elements on a webpage where the colors are supposed to match, the problem becomes more serious.

Fortunately, there are workarounds. For example, consider the following two methods:

  1. Removing the gamma information
  2. Correcting for specific browsers

Method 1: Removing the Gamma Information

Given that the inclusion of gamma information is optional, it's reasonable to expect that if it were omitted, PNG colors would be displayed "by the numbers" (i.e., without gamma correction), in the same manner as GIF and JPEG, and would therefore match colors defined via CSS. Unfortunately, however, this isn't the case for all browsers.

To demonstrate, PNGcrush  (a freeware PNG optimizer) was used to remove each, and then all, of the ancillary chunks related to color space information .

Tip: To remove all ancillary color chunks with PNGcrush, use the following command sequence:
pngcrush -rem cHRM -rem gAMA -rem iCCP -rem sRGB infile.png outfile.png

Figure 1 (below) compares a "normal" PNG (saved with Photoshop's Save for Web command) with each "corrected" PNG set against a JPEG background. Cases where no edges are visible (using the corner guides as a reference) are considered "correct" for the browser within which this page is viewed.

PNG gamma demonstration

Figure 1: Correcting PNGs with PNGcrush

1.  Normal PNG
2.  cHRM  chunk removed with PNGcrush
3.  gAMA  chunk removed with PNGcrush
4.  iCCP  chunk removed with PNGcrush
5.  sRGB  chunk removed with PNGcrush
6.  All color space information removed (cHRM, gAMA, iCCP, sRGB chunks removed)

The table below summarizes, by browser, which options resulted in a correctly displayed PNG (indicated by a checkmark).

Table 1 Mozilla/ Firefox Opera 8.x Netscape 7.x Internet Explorer 6/7 Safari 2.0
1. Normal          
2. cHRM chunk removed          
3. gAMA chunk removed          
4. iCCP chunk removed          
5. sRGB chunk removed          
6. cHRM, gAMA, iCCP, sRGB removed          

So, according to the results in Table 1, the majority of browsers display PNGs correctly: however, the two browsers that have problems represent the majority of users on their respective platforms — Windows Internet Explorer and Apple Safari. Fortunately, simply removing the gAMA chunk corrects the problem without affecting any other browsers.

Note: Due to a bug in MacOS 10.3, Safari 1.3.x is incapable of displaying PNGs correctly, regardless of which ancillary chunks are present/removed. (Refer to Method 2, below.)

Note: Adobe Photoshop 5.0 contains a bug (subsequently fixed in version 5.5) that doubles the PNG gAMA chunk, resulting in images that appear darker than the original. While there is nothing actually wrong with the pixel data written by Photoshop 5.0, applications that use the embedded gamma information will render the PNG too dark. PNGcrush may be used to correct the erroneous gamma information, using the following command line:

pngcrush -double_gamma infile.png outfile.png

Method 2: Correcting for Specific Browsers

The "average" uncalibrated Windows monitor is represented by the sRGB color space, and has a gamma of 2.2. When a PNG is saved, information about the color space is written to the PNG file (as recommended by PNG Specification ). However, when both the sRGB and gAMA chunks are present, Internet Explorer uses a gamma of approximately 1.93, while Safari uses a gamma of 1.8 — regardless of the actual gamma — making the image appear slightly dark (as demonstrated in Method 1, above).

One way to make PNGs match other design elements, for a specific browser, is to apply an artificial gamma offset using a Levels adjustment. The desired offset is simply the ratio of the display-system gamma and the assumed/imposed gamma:

Tip: A Photoshop action may be used to automate the above technique. For your convenience, I've made a sample action available in the downloads section, below.

The same results can also be achieved by using PNGcrush  to embed a gamma value (expressed as a reciprocal) that matches the assumed gamma:

To "correct" PNGs for Internet Explorer, the command would look something like this:

pngcrush -replace_gamma 0.5181347 infile.png outfile.png

Figure 2, below, compares a "normal" PNG (saved with Photoshop's Save for Web command) with each "corrected" PNG set against a JPEG background. Cases where no edges are visible (using the corner guides as a reference) are considered "correct" for the browser within which this page is viewed.

PNG gamma demonstration

Figure 2: Browser-specific gamma offset

1.  Normal PNG
2.  Levels adjustment used to increase gamma by 1.14 prior to saving
3.  Levels adjustment used to increase gamma by 1.22 prior to saving

The table below summarizes, by browser, which options resulted in a correctly displayed PNG (indicated by a checkmark).

Table 2 Mozilla/ Firefox Opera 8.x Netscape 7.x Internet Explorer 6/7 Safari 2.0
1. Normal          
2. Gamma 2.2 (Offset 1.14) n/a n/a n/a   n/a
3. Gamma 1.8 (Offset 1.22) n/a n/a n/a n/a  

There shouldn't really be any surprises in Table 2. This second method involves artificially offsetting the PNG gamma to specifically compensate for Windows Internet Explorer or Apple Safari. Consequently, this technique is unlikely to work for any other browser or application.

Note: The results observed for Safari 2.0 are the same as those observed for Safari 1.3.x.

Conclusions

So what does it all mean? Well, if you (or your target audience) are using a modern, standards-compliant browser, such as Firefox, Mozilla, or Opera, then there aren't any issues. However, if you're using Internet Explorer or Safari 2, removing the gamma information (Method 1, above) is the best choice for making a PNG match colors defined by CSS.

For browsers where Method 1 doesn't work (e.g., Safari 1.3), the only other recourse seems to be Method 2.

Unfortunately, there is no single solution that works for all browsers, so for situations where image colors need to match style sheet colors in "older browsers", it's best to use a JPEG or GIF.

This doesn't in any way preclude the use of PNG images in older browsers. In fact, for cases where matching colors isn't important, PNG is still a safe and highly recommended image format. This includes standalone graphics, as well as those with transparent or alpha-blended backgrounds.

Note: When designing images for the Web, it's a good idea to use sRGB as the working color space and a display-system gamma of 2.2. This will ensure that browsers that ignore gamma information will still display the image as intended — by simply blasting the pixels onto the screen according to their numeric values. This works because the average PC monitor has a built-in gamma of 2.2 when viewed in typical room lighting.

Related Links and Useful Resources

Downloads

To download this action, you may need to right-click on the link below (Ctrl-click on the Mac), and choose "Save Target As".

Download: ATN PNG Gamma
Version: 1.0.5
Size: 2 KB
Description: This Photoshop action adds a Levels layer with a gamma adjustment of 1.14, to "correct" PNGs for use in Internet Explorer. An action to correct Adobe Photoshop 5.0 PNGs is also included.

Installation

  1. Download the PNG Gamma action set
  2. Copy the action into your "Adobe Photoshop CS#/Presets/Actions/" folder
  3. Restart Photoshop
  4. From the Actions panel menu, select CorrectPNG (which should appear near the bottom of the menu)

Note: If the action does not appear in the panel menu, choose Load Actions, and select the action (from Step 2, above).

 

If you enjoyed this article, please consider supporting this site. As always, I welcome your feedback and suggestions.