Lars Nielsen's Discoveries

April 20, 2012

Inconsistent colour rendering in the web browser with PNG images

Filed under: Branding,SharePoint — Lars Nielsen @ 7:58 pm
Tags: , ,

When you need to add images to the branding on a site, you (or whoever creates the image) need to decide what format to use for the image files; this basically comes down to a choice between GIF, JPG or PNG. This article is a good discussion of which one to use.

The general advice is to use JPG for photos and PNG for everything else. You only need to restore to GIF if you need to work with older browsers (for example if you want transparency on IE6) although there is the PNG fix for IE6 that can help to get round this.

But recently I was working with an image for a web button that had to match the hex RGB colour (e.g. #cccc99) of a DIV background that was set in CSS. I started out asking the graphic design people for a PNG file, as this is a more suitable lossless form for graphic images like this. I checked the PNG file with a colour picker to make sure that it had the right hex RGB colour.  Then, I put the image tag into the page HTML and had a look at the page in the browser.  The colour of the PNG image had changed. I checked with the colour picker in the IE Developer Toolbar and it wasn’t the same RGB value as the original PNG file.  Visually it was close, but not quite the same. In other words the browser had rendered the colour within the image to something slightly different from what was in the original PNG file.

This is all down to Gamma Correction and the way that different browsers implement it.   You can use this page to test different browsers and how they correct PNG colours (even when you don’t have gamma correction information in the source PNG file).  For example, look at this page in both Chrome and IE 9 – see how different they are.  It certainly makes life difficult when you’re trying to match the RGB colours exactly if browsers decide to change them!  In theory you can turn this off within the PNG file but some browser don’t respect that and many graphics applications like Paint.NET don’t allow you to turn it off anyway when you save to PNG.

In the end it proved so difficult to deal with that I went for JPG format instead!  If anyone has any better solutions please let me know.

Advertisements

Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

%d bloggers like this: