Arlen Cox

Ramblings on my hobbies

Color Spaces and the Web

leave a comment »

Gack! I am working on creating a new website for myself at school.  Since I do a lot of photography these days, I thought I would put up a page about my photography.  Naturally I had my normal problems with HTML and CSS.  Nothing is getting centered correctly.  Alignment is odd and text never flows the way I want it to.  Oh well.  What I didn’t expect is to have problems with my photographs.

As I was proofreading my page, I realized that what I was saying about some of my photographs didn’t really correspond with the photographs.  I was saying that I really liked the color in some of the pictures and when I looked at the picture, I didn’t like the color.  In fact it looked nothing like I remembered.  I opened up iPhoto and looked at the original.  It looked great.  So what went wrong?

It turns out color spaces matter.  Check out this picture:

This is the exact same picture shown in two different web browsers.  The one on the left is shown in Google Chrome (my new web browser of choice).  The on on the right is shown in Apple Safari (my previous web browser of choice).  Whether you like it or not, I intended for the picture to look like the one on the right.  So why did this happen?

It turns out that the picture has an embedded color profile.  This tells the computer displaying the picture what the color values actually mean.  In this case, the picture uses the Adobe RGB space, which is larger space than Standard RGB (sRGB).  When a browser that ignores color profiles renders the picture, it interprets the colors specified in Adobe RGB as sRGB colors.  This results in the muted colors seen in the left picture.

There are several solutions to this problem:

  1. If you are shooting with a point and shoot camera, you probably won’t have this problem.  Most cameras use the sRGB color space by default and photo editing software will respect this.
  2. If you are shooting with a DSLR, you could always shoot in JPEG mode.  This will give you the same benefits as a point and shoot.
  3. If you’re like me and want the extra dynamic range offered by RAW you could try editing using programs other than iPhoto.  I know Aperture can be set to export to sRGB regardless of what color space you edit it.
  4. If you you’re even more like me and you don’t want to buy software, you could use ColorSync, which comes with every Mac to change the color space of your picture.  It’s very easy to set up an automator action to convert any JPEG image from Adobe RGB to sRGB.  It’s a quite fast operation.

The real problem is for people viewing my pictures.  I’m not particularly eager to go back and update all of my pictures to fix the color profile.  So which browsers can actually view my pictures correctly?

Firefox 3 (Win/Mac/Linux) Works! (Supports ICC v2 Profiles)
Firefox 4 (Win/Mac/Linux) Works! (Supports ICC v2 Profiles)
Chrome 10 (Win/Mac/Linux) Does not work!
Safari 5 (Win/Mac) Works! (Supports ICC v2 and v4 Profiles)
Internet Explorer 7 (Win) Does not work!
Internet Exporer 9 (Win) Works (sort of) (Supports ICC v2.  v4 seems broken)

 

I recommend that if you’re using chrome to view my pictures you try looking at them again in a supported browser. Use this website to test your browser for compatibility.

Advertisements

Written by arlencox

March 20, 2011 at 8:43 pm

Posted in Uncategorized

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

%d bloggers like this: