The infamous PNG gamma/color correction problem

PNG images are great for Web work, but there's one problem that was really getting on my nerves: the color correction problem. PNG images, like many other formats, support embedded ICC profiles for color management. For websites this feature can become a big hassle since some Internet browsers (namely, Safari 3.x and up) will adjust the gamma and colors of images according to their embedded profiles, but the colors defined in CSS stylesheets are viewed with the native color profile. So if an image with an embedded ICC profile is used in combination with "background: " rules defined in a CSS stylesheet, the image will not match the background color of the page!

Fortunately, GIMP is capable of converting an image's embedded profile into the sRGB profile which was designed for use on the Internet.

First, GIMP requires a bit of setup:

1. Select the color profile for your display by selecting Edit > Preferences from the menu and clicking on the Color Management section
2. Set Mode of Operation to Color managed display
3. From the Monitor Profile drop-down box, choose Select color profile from disk... and select the ICC profile which is you are currently using (tip: On OS X, ICC profiles are stored in /Library/ColorSync)

Once GIMP has been informed about which ICC profile your display is using, it can convert embedded profiles to the sRGB workspace:

1. Open the image you want to convert
2. Select Image > Mode > Assign from the menu and ensure that the sRGB profile is currently assigned
3. Select Image > Mode > Convert from the menu and select the ICC profile that your display is using (the same one you chose in the setup sets)
4. Save the image and if applicable, pass it through pngcrush to make it smaller