PNG Image and Background Color Mismatch

Affected Versions

This bug affects: IE8, IE7, IE6

Symptoms

Colors specified in CSS differ from the ones used in PNG images despite having the same color code

Date of the Tutorial

Sun Aug 9 07:07:46 2009

Description

You create a logo or some fancy-shmancy artwork and save it as a PNG image. You put it as background (or normal image) and surround it with the same freakin' color you used in the image, but alas, they turn out to be of a different shade in IE (I was told this also affects Safari on Mac, don't have one - can't test). Let's take a looksie:

Demo

Due to the nature of the bug, the demo is available on a separate page

HTML Code:

<div></div>

CSS Code:

div {
    width: 500px;
    height: 500px;
    background: #74822D url(pngcrush.png) no-repeat center;
}

The funny thing about this "bug" is that it's not really a bug :) It's a feature! What's even funnier is that I've seen people start looking for "web safe colors" and what not, thinking that they used "wrong" colors. Anyway, enough with the blabbering, let's get to solving this sucker.

Solutions

Below are solutions for the above bug ordered by the solution type.

Solution (Pseudo Bug)

Date of the Solution

Sun Aug 9 07:22:32 2009

Fixed Versions

All of the affected

Description

When I've said that this is a feature and not a bug, what I meant is that IE supports "PNG Gamma profiles". I've found a page that seems to talk about the topic: The Sad Story of PNG Gamma "Correction" by Henri Sivonen. The solution for our bug is simply removing those gamma profiles from your PNG images. Let's glance at the fixed demo:

Due to the nature of the bug, fixed demo is available on a separate page

HTML Code:

<div></div>

CSS Code:

div {
    width: 500px;
    height: 500px;
    background: #74822D url(pngcrush_fixed.png) no-repeat center;
}

Our code stayed the same. What I did is "fix" the image using pngcrush program. At this point I'd like to point out that you can configure your editor to NOT save those gamma profiles in the first place. The editor that's being naughty and saves them by default seems to be Photoshop; I'm a happy Gimp user and I don't have problems with my PNGs, this also means that I cannot give you info on how to configure Photoshop to not to save those profiles.

Anyhow, pngcrush can also reduce the size of your images, so why not give it a go. The command I've used to "fix" the demo image is: pngcrush -brute_force -rem gAMA -rem cHRM -rem sRGB -rem iCCP pngcrush.png pngcrush_fixed.png. The explanation of the program's arguments is beyond the scope of this document - as always, RTFM

On Ubuntu pngcrush is available from the Universe repos: sudo apt-get install pngcrush.

Comments

Serge

Thu Oct 7 00:49:23 2010

I am a happy Gimp user as well and my PNGs are color shifted just like those from Photoshop. oh well...
Zoffix Znet

Mon Jun 28 16:19:51 2010

Not sure about newest versions of PhotoShop, but I recall CS2 leaving the profiles in the file.

In either case, it's not that it produces faulty file or anything, so I don't see a reason why Adobe would remove it from the default options :)
Victor Martinetti

Mon Jun 28 09:40:45 2010

Im not sure, but in photoshop you should to create the png by the 'Save for web and devices...' menu, not by the Save as...' menu. Try it...
Patrick

Wed Feb 24 11:26:11 2010

If this bug ever did affect Safari on Mac it has been fixed at least since Safari 4.0.4