PNGs & browser colour management

Subtle colour differences in hex #3FA868 between browsers

Ahh, the joys of colour management. Within the realms of web development, managing colour can be a real pain. It is a well-known fact that browsers are already guilty of subtle variations in how they render web pages, but it can be true of how they render colour too.

You might have noticed when saving PNGs that the colour varies ever so slightly between different browsers (usually Firefox). The image above shows what should be #3FA868 between Chrome and Firefox, both running on Mac OS X. For designers that like their websites to look the same in all browsers, this is evidently a problem, and moreso when trying to blend an image into a background colour.

The problem stems from how each browser handles colour. Images often come with something called a ‘colour profile’ embedded within them which allows displays to be calibrated in order to give the best colour. In the above example, the difference is caused by Firefox rendering the image with the colour profile, whilst Chrome opts to ignore it. You can, if required, turn this on in Chrome.

There are two solutions. If you are using Adobe Photoshop, ensure that PNGs are saved using the sRGB colour profile (under ‘Save For Web’). The second, and my preferred method, is to strip out the colour profile from the PNG file. This has the added bonus of shrinking the file size (sometimes as much as 25%).

This is done with a tool called pngcrush which is a command-line tool.  If you are not confident with using the command line there is a GUI alternative which embeds pngcrush‘s functionality, called trimmage (also available for Windows).

Stripping out an images colour profile can be done with the following command:

pngcrush -q -rem gAMA -rem cHRM -rem iCCP -rem sRGB oldfile.png newfile.png

After performing this many, many times, I found it quite labour intensive.  This is mainly due to pngcrush not allowing you to write over the old file in place since the source and destination are the same.  In order to bypass the monotony, I wrote a quick shell script that will convert all PNGs in the current folder:

#!/bin/bash

echo " "
shopt -s nullglob
for file in ./*.png; do
	echo "Working on $file"
	pngcrush -q -rem gAMA -rem cHRM -rem iCCP -rem sRGB $file "$file.tmp"
	mv $file "$file.old"
	mv "$file.tmp" $file
done
echo " "
echo "Complete."
echo " "

# Remove old files
rm -rf *.png.old

I tend to save this in a folder listed in $PATH (such as /usr/local/bin) for easy access – et voila!  PNG-based headaches are now a thing of the past.  Unless of course, you want to start a discussion on transparent PNGs and IE6…

Leave a Reply

Your email address will not be published. Required fields are marked *