Tag Archives: apple

Mac Browsers + PNGs = Mismatching Image Colors with Same HTML Hex

Most people with a Mac don’t know this but their gamma is set to 1.8 by default where the rest of the world is set to 2.2 for web/tv. The only reason I know this is because I had to figure out what was causing certain images to display darker on macs than Windows/Linux computers. Thankfully Don MacAskill, explained the basics of this “phenomenon” of Mac Browsers + PNGs = Mismatching Image Colors with Same HTML Hex” in great detail and with good examples

Internet standards, including HTML, CSS, and Flash, are based on a gamma of 2.2, making colors partway between black & white appear darker and higher contrast than 1.8 gamma makes them appear.

Clearly this is a problem, as referenced by Ron, even Apple recommends you change your default gamma from 1.8 to 2.2, where they also link to some further reading.

If images are delivered with the lower gamma information embedded, web browsers on macs tend to* (not all see note below) display them incorrectly if it’s not reading the color profile properly.

As a webdesigner / web developer / photographer, this might worry you. You’ll want it too look the same to everyone or at least the majority (95%+ of the world uses windows). The easiest way I found to fix this in my work flow, using Ubuntu Linux was with pngcrush, a cross-platform application that allows you to not only reduce image filesize loseless, but allows you to remove information that can cause confusion with the way images appear in mac web browsers.

All I had to do to install it on Ubuntu was:

sudo apt-get install pngcrush

Then I wrote the following command to strip all gAMA, cHTM, iCCP and sRGB information from all png files within a directory and move them to a folder called “crushed”

pngcrush -d crushed -rem gAMA -rem cHRM -rem iCCP -rem sRGB *.png

*It’s important to point out that this does not effect OSX 10.6+ (snow leopard and beyond). Further reading on why apple chose 1.8 gamma as the default can be found here.