Firefox 3.5 – ICC Profile Support

After many discussions, much frustration and a good bit of community involvement, Firefox 3.5 now supports embedded ICC Color Profiles by default.  This is a huge step forward for photographers (or really, anyone who wants to view online images how the author wanted them to be viewed).  While I won’t say that this latest update will solve all the color profile woes of online browsing, it is definitely something photographers and other photo publishers should be aware of.

So What is an ICC Profile?

Books have been written about color management.  In fact, numerous websites have been created, articles written and arguments waged about how color profiles and color management should affect the everyday user.  Suffice it to say that it’s no small or simple matter.  I fully expect many to disagree with what I’m about to say.  But please stay with me to the end, and feel free to comment if you have an opinion.

With that disclaimer out of the way, I feel it’s somewhat appropriate to step back and give a bit of an overview to color management so it is clear just where ICC profiles fit into this whole topic.

An ICC Color Profile is a description of the color space used to encode the color data of an image.  Sounds cryptic?  To understand this concept, we have to step back and understand a bit more about digital images.

What is a Digital Image?

I know what you’re going to say.  This is a trick question — a digital image is an image that resides on a computer, or some form of digital device.  And in that statement, you’re 100% correct.  But it’s important to understand just how that image is stored.  In it’s purest form, an image is made up of a series of numeric values each representing a portion of the image.  This numeric data is translated into real-world colors by the image viewing application.  Simple?  Sort of.  The issue is, there are different color spaces, or translations between the numeric data and the real-world color.  What this means is that if the application creating the image is using one translation, and the application viewing the image is using a different translation, the image will likely look very wrong!  Here’s an example:

Train Seat sRGB Profile
Train Seat sRGB Profile
NIKON D200 @ 50mm — 1/60 sec , ƒ/ 2.8 , ISO 100
Train Seat Adobe RGB No Profile
Train Seat Adobe RGB No Profile
NIKON D200 @ 50mm — 1/60 sec , ƒ/ 2.8 , ISO 100

The above image on the left looks relatively correct.  The one on the right?  Not so much.  What went wrong?  Your image viewing software (a web browser in this case) didn’t know what translation was used when the image was saved, and therefore, translated the color data of the image incorrectly.

So, how does someone ensure that this doesn’t happen to them?  How can an application know how to decode the data?  Simple.  By embedding a ICC Color Profile in the image which describes the color space used to create the image.

But wait!  It’s not so simple…

Sadly, it’s actually much more complicated.  In an ideal world, image creation software and image viewing software (in all forms) would understand and respect the embedded ICC Color Profile.  Unfortunately, this isn’t even close to being true.  In fact, most software that isn’t written for graphic designers or professional photographers simply ignores these profiles.  Shocked?  I was too when I started becoming more involved with digital photography and started realizing just how hard this color management thing was!

The annoying thing about color management is that each computing platform and each software application plays a role.  What this means is that Internet Explorer running on Windows may have completely different color profile handling capabilities than Firefox running under Windows.  Bring in Mac or Linux systems and the issue gets even more confusing and uncertain.

To start with, is your browser color profile aware?

Train Seat sRGB Profile
Train Seat sRGB Profile
NIKON D200 @ 50mm — 1/60 sec , ƒ/ 2.8 , ISO 100
Train Seat Adobe RGB Profile
Train Seat Adobe RGB Profile
NIKON D200 @ 50mm — 1/60 sec , ƒ/ 2.8 , ISO 100
Train Seat Adobe RGB No Profile
Train Seat Adobe RGB No Profile
NIKON D200 @ 50mm — 1/60 sec , ƒ/ 2.8 , ISO 100

If the center image is the same as the image on the left, great!  Your browser respects and understands ICC color profiles.  If the center image looks more like the image on the right, you are using a browser which does not support ICC color profiles.  If you’re running the newest Firefox version 3.5, the center image should look like the good image.  Now try that with another browser?  What are the results?

I’ve only scratched the surface of ICC Color profiles, but stay tuned.  I’m planning on writing more on this topic over the next week or so!