Blog: Secrets from the Chef

Gamma Correction: We Wanted the Best, You Know the Rest

Dmitri JoukovAuthor: Dmitri Joukov
22 August 2006

It may seem that the peaceful coexistence of two different platforms, Macintosh and PC, within one office has long ceased to cause problems. No one could imagine that it is in our age of going global and of open barriers that we’d find yet another catch in a thing as easy as preparation of pictures to show intermediate results to the client. Sit back and get all eyes on this teaching story.

In the last century there were only two ways to show intermediary results of the work to the client:

  1. JPEG which was good for big nice and-most important-colorful pictures. Fine small details were not for it.
  2. GIF which set the limits of the 8-bit palette. However if that palette was enough, GIF displayed all details in the exact way you needed.

The new century opened the gates for a new prince on a sorrel, the format of Portable Network Graphics, PNG for short. This was a standard by all means progressive: any palette, no quality losses, reasonable file size and support of alpha-channel. In one word this was not a format, but soothing balm for the designer’s soul.

In the times bygone the colors from the computer were transferred to analogue monitors RGB as they were. All other colors were mixed using those three. Different developers each made it their own way. And so it happened that one and the same colors were displayed differently in Mac OS and Windows. It was due to the different values of the Gamma parameter, 1.8 and 2.2 for Mac OS and Windows respectfully.

The developers of PNG thought that it was not right for the same pictures to be displayed differently in different systems due to some gamma. They decided to help each and every one and invented nothing better than writing into the PNG file the gamma value defined in the operating system where the file was created. It all was done with good intentions of letting everyone see the picture almost the same as the author had made it. The program displaying the picture was to read the two Gamma values (from the PNG file and from the operating system) and, after certain simple calculations, adjust colors for proper displaying.

We could remain in the dark about this for ever. However, there was a layout of one web site that was edited under Windows and Mac OS (in turns), when PSD and PNG files and sometimes screenshots were passed between us. It’s so good that we have Yegor: it was he who noticed the change of colors regarding the initial variant. When we started investigating what’s what, everything had to have its share of blame: Safari, Firefox, Mac OS and Windows. It could take long to find the guilty one hadn’t we come across the article The Sad Story of PNG Gamma “Correction” on the Internet. Please don’t think that it is yet one more heap of useless symbols! It’s just the other way round. It is my advice to read it to everyone who is into HTML and CSS layout making. I read it five times!

Right. Reading a clever article in a foreign language is a troublesome matter. I’ll tell you briefly what traps are in store for you.

Let’s say the designer has a Macintosh and the client has a PC. The designer draws a web site using corporate RGB-defined colors. Due to the difference in the notorious Gamma values those colors look not the same on Macintosh as they do on PC. Let’s say the designer shows the result of the work in an old-fashioned JPEG file. The client then sees the colors on his PC not quite the way the designer did-but they do fit the corporate colors! Everyone is happy. What if the designer wants to use the forward PNG format? The client receives the file and sees that the colors do not match the corporate palette: the over-smart browser tries to show the picture just the way the designer saw it on the Mac!

Or take this example. Let’s say you made up a web site on a PC. Some of your pictures are GIFs and some are PNGs. There are RGB color definitions in some places in your CSS. A cheerful Mac OS user visits the site and sees that the colors don’t match in the places where PNG and GIF pictures are coupled, or where PNG lies against a background. Our quick-witted reader already knows what’s the catch: the browser adjusts the colors in PNG pictures according to the Gamma value but leaves them intact in CSS and GIFs.

It’s about time one started pulling at his hair. Wait, o my beloved reader and leave your hair be. I’ll show you a couple of tricks.

The first and most stable thing to do is to avoid using PNG altogether.

The second method is less reliable and time-consuming. You need to remove the Gamma parameter from the PNG file. How do we mortals do it, you will ask? O my young friends, for you the lovers of free and freely distributed code have written a program, pngcrush. The Mac OS users can download the version compiled for Darwin. You need to run it with the following options:

pngcrush -rem gAMA -rem iCCP -rem sRGB -rem tEXt infile. png outfile. png
  • infile.png is your original file
  • outfile.png is the output file

Take a note of the file size before and after the operation: it becomes up to 15% smaller, and there are no quality losses. Thank Adobe for not mastering all of PNG potential.

In order to solidify this material, here are some links for reference:

  1. The Sad Story of PNG Gamma “Correction”.
  2. Pngcrush.
  3. TweakPNG, a program which lets you get into the PNG files and play with them.
  4. PNG and HTML/CSS color matching test for different browsers.

Terms of Use

These materials can be used for any purposes with obligatory indication of the author.


Or… just not use photoshop for the final file.

PNGOut & PNG Gauntlet do a great job of fixing this. Also for a plugin solution – web image guru is great as well.

Basically it’s the fault of flawed software, not PNG.

Reply Gregory, 2 November 2006

Leave a comment

You can log in with your twitter or facebook accounts. After authorisation on one of this sites, you'll be able to leave comments here.

Connect with Facebook

If you have an OpenID (for example, use it to authorise.

Log in with your Turbomilk account or register a new one.