Why png files change colors in different browsers

While working on a new theme for Drupal, I decided to venture into .png files and get away from .gifs entirely. One thing I noticed right away is my PNGs weren't matching my hex colors in Internet Explorer 6, but they looked fine in Firefox 2 on windows.

As it turns out, this is a feature of the PNG file, which attempts to solve cross-platform gamma correction issues. While this is very helpful for photo sharing, it's a bit of a nuisance for us web developers who need PNG images to match hex colors with precision.

The solution is to simply remove the gamma correction header values from the png image itself (Which also shaves off a little file size too!).

Relax... it's honestly not as hard as it sounds :) For Windows, there's a simple opensource application to do this called TweakPNG. I haven't been able to find a similar solution for Mac / Linux, but that may be because this is a Windows specific bug. If I can reproduce it in Windows or Linux, I'll probably put together a python script to remove the offending header and upload it here.

1 Comment

  • KP said:
    3 years, 1 month ago

    I was wondering what the deal was with that. Thank you.

Commenting disabled

My latest project: Bad Company 2 Stats, Weapons, Vehicles, Forums, Information