Digital-Image Color Spaces, Page 2: Test Images
Article: Table of Contents       Page: 1 · 2 · 3 · 4 · 5 · 6 · 7       This is the second page of a seven-page article

See For Yourself The Effects of Misinterpreted Color Data

In the introduction, we saw an exaggerated (but real) example of how colors turn out wrong when the color space is misinterpreted. Luckily, common digital-image color spaces are all close enough so that even when misinterpreted, they're generally in the right ballpark. More or less. Sort of. Maybe.

In the box below, mouseover the buttons under the large image to see what that image looks like when its color data has been encoded in the named color space: the orange buttons on the first row bring up images without embedded color profiles, while the turquoise buttons on the middle row bring up images containing embedded color profiles. Does your browser recognize and respect them? The purple buttons (third row) are explained a bit later on this page.

Note: only the first images have the turquoise and purple rows of buttons; continue reading below the test box for more on how to interpret what you see.

Does Your Browser Respect an Embedded Color Profile?
Color ProfileColor Data Encoded As...
mouseover button to see image
  None: sRGB AdobeRGB ColorMatch ProPhoto WideRGB AppleRGB
These are not shown properly on any browser except IE for the Mac in special situations.
If you have an “average” circa 1990s consumer CRT monitor, the sRGB one will be closest.
  Embedded: sRGB AdobeRGB ColorMatch ProPhoto WideRGB AppleRGB
If the images on this row all appear the same, your browser respects their embedded color profile.
If they're all different, the browser ignores the embedded color profile.
  Tagged: sRGB AdobeRGB
Click to select another picture (or use keyboard N and P):

Use all three sets of buttons (for images that provide them) to determine how colormetrically advanced your browser is, as described below. The other pictures (which have the orange buttons only) are provided so that you can see the practical effects of misinterpreted color spaces with a variety of real-world images.

The tests show images encoded with six different color spaces.

  • 7 ORANGE BUTTONS — Without an embedded color profile

    The data has been written as per the button colorspace, but without an embedded color profile, so an application has no other choice but to apply its default color handling. For virtually all browsers, the default handling is “no color management,” which means to assume that the image data was written for the current monitor (which is pretty much guaranteed to be the wrong assumption, unless you built the image yourself with this odd intent built in). This sad state of browser color-handling is discussed on the next page.

  • 7 AQUA BUTTONS — With an embedded color profile

    The appropriate color profile is embedded into each image, so if your browser respects embedded color profiles, all aqua-button images should look the same (except, perhaps, for mild artifacts from the aggressive image compression I used in trying to keep the size of this web page reasonable). Color-managed browsers do this properly (Safari and modern versions of Firefox on Mac/PC, and a smattering of other minor Mac browsers).

    If your browser does not honor an embedded color profile (as most don't, unfortunately), you should see the same wrong-color results as with the no-profile set of orange buttons.

  • 2 PURPLE BUTTONS — Tagged color space

    The Exif and DCF standards allows an image's color space to be noted as being “sRGB,” “Adobe RGB,” or “something else.” Advanced image-processing software like Photoshop understands these tags, but I don't know of any browser that does. Still, I've put this row so that you can test your browser.

By the way, I took all these pictures (except the one with me in it, which my wife took). I have blog posts about some of them: autumn leaves / firemen's boots / autumn house / shrine lanterns / silly slide.

Conclusions

In looking at the real-world tests, it's clear that when a color space is misinterpreted, the result can appear wrong — usually dull and muted. It's not as bad as the green skin of the funky color space I made up for the Page-1 example, but it can certainly be quite noticeable.

To really understand the meaning of these tests and what the results mean in a practical way, we must talk of not only color spaces, but of the larger picture of color management.

Continued on the Next Page

This article continues with Page 3: History of Color Mis-Management. If you'd like to skip the background and technical talk, you can jump ahead to the last page, Page 7: Recommendations and Links.


All 20 comments so far, oldest first...

Works perfectly in Omniweb – using Omniweb 5.5.4 at the moment.

— comment by Andre on March 26th, 2007 at 8:13pm JST (9 years, 2 months ago) comment permalink

Works perfectly in Internet Explorer provided by Comcast. Found the article by searching for solutions to ‘color washing’ after upload to Frec Miranda photosite (how embaressing, taking a good color edited shot and finding a bleached out shot loaded into my photo gallery…maybe I can fix things now by properly converting and assigning!) Thanks for the technical info; it was just right for me.

— comment by Photomech on April 4th, 2007 at 4:52pm JST (9 years, 2 months ago) comment permalink

Hi Jeffrey,

Thank you so much for this excellent article! Although after much reading on other webpages I had already figured out most of this stuff, and my color management practices are finally on the right track, your article helped pulling it all together once more. I already started with a similar “clean-up” operation on my own posted images, making sure everything is properly tagged and converted to sRGB and so… still need to do a lot though.

Just one small remark about this specific page:

– I don’t know if it’s computer specific thing, but the “Mouse over” effect with the images does NOT work in my Firefox 2.0.0.4 on XP SP2. I can not view any of the additional images, it keeps showing “Image load in progress”. I CAN properly view it in IE7 on the same computer.

Thanks again,

Marco

Thanks for the kind words, Marco. I’m sorry to hear about the mouse/loading problems. I also have Firefox 2.0.0.4 on WinXP SP2 and it all works fine (and on IE and on Safari Win/Mac), so I’m at a loss at how to suggest a fix… )-: —Jeffrey

— comment by Marco Boeringa on June 25th, 2007 at 9:56pm JST (8 years, 11 months ago) comment permalink

Hi Jeffrey,

Thanks for the quick respons. I have now made a few additional checks. First, I had a look at the source of your webpage and noticed it used JavaScript. Should be no problem, since my own webpage also uses it, and it functions normal.

Nevertheless, I checked a few things based on this:
– went to Options / Content in Firefox and checked all settings under “Enable Javascript”. Enabling everything there did unfortunately not help.
– although I am pretty sure it’s not necessary for normal JavaScript, I than chose to search for a possible new JAVA plugin for Firefox. I updated to “j2se runtime environment 6 update 1”. This didn’t help either.

Still don’t know what’s going wrong… ;-(

Anyway, it’s probably only limited to some minor issue on my own computer… Nothing to worry about for you than at this moment…

Marco

— comment by Marco Boeringa on June 26th, 2007 at 2:26am JST (8 years, 11 months ago) comment permalink

Hi Jeffrey,

This remark is completely unrelated to my other comments, but I thought it interesting to post:

One last thing that I just happened to notice browsing some of my pictures in the Windows Explorer is, is that the Windows Explorer, contrary to IE, DOES seem to use color management when I choose to preview the images as miniatures (as opposed to for example showing file details). What a surprise!

I noticed it because I had just downloaded a number of images that use vastly different color profiles from this color test website:

http://www.color.org/version4html.html

I checked in PS CS2 that the images indeed had the stated color profiles, and the webpage looks horrible in IE, but the downloaded images do display fine in the Windows Explorer as miniatures!

Strangly again, if I switch to “Filmstrip” in Windows Explorer, the miniature images are displaying fine (but maybe these are included thumbnails??? I remember you wrote something about that option?), and the UL, LL, and LR also when displayed large in the viewer, but not the UpperRight image using the “v4 YCC-RGB” color profile… PS CS2 can view them all properly.

Ah, well, going back to that webpage, I now noticed this means the V4 profiles aren’t supported by the viewer, the V2 types are. Actually, the UL image isn’t displayed properly either, it just has a smaller shift in colors than the UR one. However, it still seems that the V4 profiles are being used for rendering the miniatures successfully. So far for the color management in Windows ;-(

Microsoft Office Picture Manager shows similar behaviour, supporting V2 profiles, but not V4, the Upper Right image goes completely black in this application, not in Windows Explorer…

Hmm… food for thought…

Marco

— comment by Marco Boeringa on June 26th, 2007 at 3:01am JST (8 years, 11 months ago) comment permalink

Since this now raised my interest in how far some Windows applications support color management, I did a bit further investigation with the four images containing V2 and V4 type profiles. These images are from the actual standard organization defining the ICC profiles – The International Color Consortium (http://www.color.org) and can be taken from the website (http://www.color.org/version4html.html. For anyone reading this: to test it yourself: right click the images and choose “Save image as”. Check in Photoshop if indeed the color profiles were properly included).

Inserting these images in Word 2003 and PowerPoint 2003 gave similar results: Office 2003 seems to support basic color management for V2 type profiles, but not for V4 type profiles. The images with V4 type profiles (Upper Left and Upper Right) displayed as completely black, whilst the two other displayed fine and looked exactly the same as in Photoshop CS2 using the embedded profiles. Maybe just a very,very,very minor shift in color based on a difference in rendering intent (relative colormetric / perceptual), but not the hosed unmanaged IE7 colors as when viewed in the webpage.

I don’t know if this actually a new feature of Office 2003 and higher, or Windows based, but it seems unlikely to me that an older Office 2000 would do this… can’t test it though at this moment. Actually, this new V4 standard for profiles already dates in original version from 2001, according to the website.

I also opened the PDF test document for V4 type profiles available from the ICC site (it’s on http://www.color.org/version4pdf.pdf). It opened in Adobe’s Acrobat Reader 8.0 (opened as TAB inside IE7 and Firefox2) and that showed all the images properly. Of course, this was NOT thanks to IE or Firefox but thanks to Adobe’s Acrobat Reader supporting the V4 standard of profiles…

Marco

— comment by Marco Boeringa on June 26th, 2007 at 7:02am JST (8 years, 11 months ago) comment permalink
— comment by Thomas on January 4th, 2008 at 6:28pm JST (8 years, 5 months ago) comment permalink

why are my images brighter on any pc as on my mac (2.2, calibrated
jo

— comment by jo on February 23rd, 2008 at 2:08am JST (8 years, 3 months ago) comment permalink

Note that the new Firefox 3 can support also ICC profiles v2 and v4 (but you’ve to activate the color management, it’s off by default for performance reasons)

— comment by Philippe Teuwen on June 22nd, 2008 at 5:27pm JST (7 years, 11 months ago) comment permalink

I just came across this website and article. Very useful and informative. However, you appear not to be aware that since its introduction, Firefox v 3.x has supported colour management, including embedded colour profiles. For some unfathomable reason this is disabled by default but it is easily turned on by opening about:config and setting gfx.color_management_enabled to true.

It’s been weighing on my mind to update for that since FF3 came out in beta. Your comment prompted me to finally make some updates, thanks. —Jeffrey

— comment by normanw on February 23rd, 2009 at 9:18pm JST (7 years, 3 months ago) comment permalink

Thanks for the interesting pages. Good news – Firefox 3.5 enables the color management by default now!

— comment by Matt on July 7th, 2009 at 3:39am JST (6 years, 11 months ago) comment permalink

Jeffrey,

Thanks for the amazing write-up about color-spaces. You’ve done a phenomenal job. It answered a ton of my questions.

But I do have one question whose answer has alluded me for months, and I believe you must know the answer because you would have had to in order to create the example images at the top of this page.

So here goes: Other than the soft-proofing techniques discussed here and here–which require you to duplicate and manually adjust the colors of your web-destined image in Photoshop’s proofing mode while comparing them side-by-side with your originals–how can you take an image from, say, the AdobeRGB color-space and convert it to the sRGB color-space in such a way that it will display in precisely the same way regardless of whether the viewer’s web browser is color-managed or not?

Is there no automated & precise process for doing this without having to painstakingly eye-ball each image that I want to make “web proof”? … i.e. make them look the same for a given user when they view the image in Safari & IE side-by-side?

There is no mystical, Utopian “web proof” color space. The best you can do is work with a well-calibrated, well-profiled color-managed system so that those who consume your images have at least a chance to see the proper colors, if they, too, have a well-calibrated, well-profiled color-managed system. Everything else is just random. Ensuring that you produce sRGB (as opposed to, say, ProPhotoRGB or AdobeRGB) helps decrease the randomness for some consumers, but it’s all still random. Someone using a browser that’s not color managed probably doesn’t have a well-calibrated, well-profiled system anyway. Those who happen to have a color-managed browser likely don’t have a well-calibrated, well-profiled monitor anyway. So there’s much randomness, and it’s my opinion that any manual tweaking you do to “fix” a correctly-profiled image so that a user with a broken system might see it better — two wrongs canceling themselves out, you hope — is destined to fail horribly in all but the very specific cases you check against (e.g. you might end up making it look just dandy on your wife’s generic PC), at the cost of merely stirring up the randomness for most others, and explicitly breaking it for those few with good systems. —Jeffrey

— comment by Mason on July 8th, 2009 at 2:52pm JST (6 years, 11 months ago) comment permalink

Jeffrey,

I finally discovered the answer to my question–and now realize that I asked my question in a way that made it sound like I would only be satisfied with a 100% perfect translation from my screen to the viewer’s screen, which is not what I was really meaning to ask.

What I was looking for is Photoshop’s “Edit ->Convert to Profile” command. Assuming I’ve got a properly calibrated monitor, I can use Convert to Profile to translate my image from the ProPhoto color space that my DNGs start off in and into the sRGB color space that generally looks the best for most people’s uncolor-managed browsers / uncalibrated computer screens. (So they go from ProPhoto DNG => ProPhoto JPG => sRGB JPG)

I can also use the Convert to Profile command to take that original master image and convert it into the ICC profile of my local Costco Photo Center’s Fuji Frontier printer (as profiled by Dry Creek Photo), so that my prints end up looking virtually identical to what I’m seeing on my computer screen. Those printers ignore ICC profiles, so to get them to print correctly you must speak to them in precisely their own language (i.e. color space) as defined by their custom ICC profile (hopefully) listed on Dry Creek Photo’s site. To do that you use Convert to Profile with the destination profile set as the printer’s profile, but you don’t need to bother embedding the color profile because it’s now moot for two reasons: (1) the printer ignores it anyway and (2) even if the printer didn’t ignore it it wouldn’t do anything differently with your image because you’ve just fed it an image that is in precisely the color space the printer lives in.

Hopefully that helps people out there who are having the same problem I was.

Thanks again for all the great info, Jeffrey.

— comment by Mason on July 26th, 2009 at 12:09pm JST (6 years, 10 months ago) comment permalink

Jeffrey

This is indeed one of the best explanations of color management I’ve read so far (and I’ve read several ….). Congratulations and thank you !!

One question I have:

On your sample images, everything works as expected in browsers (no Color Management in IE7, Color Management in Firefox 3.5) as well as in imaging applications (IrfanView, LR, PSE).

This is true for all color codings except “Jeff’s LCD”. Looking at the images with “Jeff’s LCD” color profile embedded, I notice a slight shift in exposure/tint, especially well visible on the green cup in the middle of the image.

I imported 2 images(ProPhoto and Jeff’s LCD) into LR, which shows the same difference. Again, all images of a certain subject look exactly the same, except the one with Jeff’s LCD.

To illustrate what I’m talking about, I have exported the two (different looking) images from LR encoded in sRGB, they can be downloaded from https://www.yousendit.com/download/Z01PL0dEVEhsamV4dnc9PQ.

I’d be very interested to know what’s going on here.

Thank you
Beat Gossweiler
Switzerland

— comment by Beat Gossweiler on October 11th, 2009 at 9:45am JST (6 years, 7 months ago) comment permalink

Ipad safari gets this wrong for all of the examples above, even though it doesn’t support Flash at all!

— comment by Alex Brown on June 5th, 2010 at 5:20pm JST (6 years ago) comment permalink

IE 9 running on Windows 7 does appear to respect color profiles in the browser, where as Chrome 15 does not. Maybe it’s time to stop unnecessarily slandering Microsoft 🙂

— comment by Prabal on January 10th, 2012 at 3:08am JST (4 years, 5 months ago) comment permalink

Hello Jeffrey! My name is Radu and I write to you from the US.

Great article, LOTS of interesting info! It has been a while since this article was written and I am pleased to see that the version of Firefox that I am currently using (13.0) seems to recognize and properly process images with embedded profiles (as seen on your test page). 🙂

I am also a registered user of your geo-tagging plugin for LR. LOVE IT!

See you on Google+!

— comment by Radu Butarascu on June 7th, 2012 at 10:59am JST (4 years ago) comment permalink

Opera 12.50 now supports embedded ICC profiles http://my.opera.com/desktopteam/blog/

— comment by toyotabedzrock on August 30th, 2012 at 5:02am JST (3 years, 9 months ago) comment permalink

Hi. Thanks so much for your EXIF viewer and for this article. I’m only on page 2 and am already surprised by its continuing relevance. Of course Firefox 15.0.1 does support the embedded profiles and I was sure that IE would, too, but I just tested IE 8 and it does not honor the embedded color profiles! So, that would be one reason to upgrade to IE 9.

— comment by Hallie Bourne on October 13th, 2012 at 11:14pm JST (3 years, 7 months ago) comment permalink

” Good App ”
Thank you so.

— comment by hellbuster08 on January 22nd, 2014 at 4:11am JST (2 years, 4 months ago) comment permalink
Leave a comment...


All comments are invisible to others until Jeffrey approves them.

Please mention what part of the world you're writing from, if you don't mind. It's always interesting to see where people are visiting from.


You can use basic HTML; be sure to close tags properly.

Subscribe without commenting