Colour Management Lesson Please...

[Edge100]

Hi all,

I have a quick question that is doing my head in.

I'm having an issue getting colours to match in my Lightroom-exported JPEGS vs. what I'm seeing on the web.

Some background:

1. I edit my RAW exactly as I like it and export from LR2 to the web with sRGB; things look desaturated on the web (Safari, so it's colour managed) vs. LR

2. I take the same RAW and export three separate JPGS, one each in ProPhoto RGB, AdobeRGB, and sRGB. Import these to PS CS4, and they all look exactly the same as each other AND exactly as they looked in LR2. Export them to the web with sRGB, and they all look the same on the web, but are desaturated vs. what they looked like in PS and LR2.

3. I take the ProPhoto RGB, Adobe RGB, and sRGB files I originally exported from LR2 and upload them directly to the web without any changes in colour space; the ProPhoto and Adobe RGB files look terrible, while the sRGB file looks as it did in 1. and 2. above, but still desaturated vs what it looked like in LR2.

My question: how the heck do I get my web output to match my screen output? I assume this is a screen calibration issue; my guess is that in LR and PS, my uncalibrated MBP screen is mapping my JPEGS to a particular colour space based on the default calibration of my screen, while the browser is trying to force the JPEG to display in the sRGB colour space, which is not exactly the same as my calibration. Am I in the ballpark here?

I just want the colours I see in LR2 or PS to look the same as those I see on the web in a colour-managed browser (and preferably in a non-managed browser like IE).

Help???

 

[Consultant]

Do you have a display calibrator?

 

[Edge100]

Do you have a display calibrator?

No, but I will buy one if it solves this problem. As of now, I have to guess at what the final web output will look like and compensate for it in LR2; basically, I have to boost the saturation of the reds and blues to make the final output what I'd like it to be.

What's really odd is that when I export from LR2 using sRGB, import that file into PS (where it looks just as it did in LR2) and then export that file for the web using "Save for Web & Devices..." in PS, the output file looks completely different, even in Preview.

To sum up:

LR2 export as sRGB (or ProPhoto or Adobe), view in Preview or PS - looks as per LR2

LR2 export as sRGB to the web - looks desaturated

LR2 export as sRGB, open in PS and Save for Web as sRGB, view in Preview or on web - desaturated

I'm royally confused at this point, and if a colour calibrator is the solution, sign me up; this is a nightmare.

 

[mlblacy]

calibration... helps, but won't solve your issue...

No, but I will buy one if it solves this problem. As of now, I have to guess at what the final web output will look like and compensate for it in LR2; basically, I have to boost the saturation of the reds and blues to make the final output what I'd like it to be.

What's really odd is that when I export from LR2 using sRGB, import that file into PS (where it looks just as it did in LR2) and then export that file for the web using "Save for Web & Devices..." in PS, the output file looks completely different, even in Preview.

To sum up:

LR2 export as sRGB (or ProPhoto or Adobe), view in Preview or PS - looks as per LR2

LR2 export as sRGB to the web - looks desaturated

LR2 export as sRGB, open in PS and Save for Web as sRGB, view in Preview or on web - desaturated

I'm royally confused at this point, and if a colour calibrator is the solution, sign me up; this is a nightmare.

Calibration is always a good idea, but will really help more if you are working for print work. Web browsers mostly aren't color-managed, so Photoshop strips the image of its color profile. Short answer is to use "Edit-->Convert To Profile: sRGB IEC61966-2.1" before saving for web.

Also, in print work the default gamma is 1.8, but for web you are better off calibrating and profiling your monitor to 2.2 gamma D/65 6500 (which is more of a PC thing).

Before CS2, Image Ready seemed to handle web images a bit more easily, and did not have the same desaturation issues (or at least they were buried). Lightroom seems to follow the same color logic as CS2/3.

Search "photoshop save for web desaturates" and you can find lots of stuff on the issue. Good info here: http://www.gballard.net/psd/saveforwebshift.html
and here:
http://www.gballard.net/psd/go_live_page_profile/embeddedJPEGprofiles.html

I noticed the issue also affects screenshots, and screen grabs. I used to use SnapZPro, but one of the latter versions started darkening the grabs (probably to compensate for web conversion??). It was just annoying. Skitch does not seem to modify my screenshots at all... an app that I can not say enough about...

Ironically a lot of printers will strip out all color management and profiles from their supplied files for printing (or require you to do so). Nonetheless, if you decide to buy a hardware calibration kit they usually are around $100-125. I use the Spyder2Pro, and found it calibrated my 24" iMac & my Apple display perfectly. When I replaced my Apple display with a Samsung, the results were so-so, and I never quite could match on screen to my SWOP proofs looked like.

Best of luck to you...
michael

 

[Ruahrc]

I don't think your lack of calibration is affecting anything, this seems like an embedded profile issue.

Case 1 seems all is right as it should be.

Case 2 can you show the exact steps you use? In my CS3 options there is a menu item under save for web which says "convert to sRGB". It's not in the most obvious place. If you don't do this the colors don't seem to look right (regardless of whether or not you embed the profile in the jpeg). I am not sure I believe that the sRGB exported file and re-saved as sRGB in CS4 is really desaturated this does not seem right.

Case 3 this is a browser color management issue. If the files are properly tagged and viewed in a browser that color manages correctly, all 3 files should look right. If you're using a browser that does not manage correctly (example, IE for Windows or Firefox with color management disabled) then the AdobeRGB and ProPhotoRGB will look wrong as you indicate. Because the browser is wrongly converting them to sRGB when it should preserve the original space.

Also I have noticed some times when certain uploading sites will strip the ICC profile out of files when uploading in order to save space. Are you putting these files direct onto a web server or using something like Google Picasa or some other photo sharing website?

When I export files for the web from LR2 I do the following:
Export as a TIFF file in 8-bits and sRGB (I export in TIFF so I'm not saving a JPEG twice, losing quality)
Have LR2 run a droplet in CS3 after it's done exporting which opens each TIFF and adds a border and then saves for web + devices, and preserving the ICC profile.

The results work great for me, again it has nothing to do with monitor calibration.

P.S. there is a difference between converting to a profile and embedding one. If you open a ProPhotoRGB file in photoshop and save it with an embedded sRGB ICC, it will look all wrong (desaturated). You need to convert it to the profile first, then save it with the embedded profile. I think this is where you're getting hung up.

Ruahrc

 

[Phrasikleia]

Just to add a footnote to what's been written already. Some systems/workflows will create ICC v.4 profiles, which Firefox no longer supports (as of Firefox 3.5, it has reverted to support for v.2 only). Safari, on the other hand, will read the version 4 profiles.

To check if your browser supports version 4, view this page in it:

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

View that page in Safari to see what full support looks like.

I'm constantly frustrated that my photos look completely different in different browsers, but there's nothing I can do about it, since my profiles are all version 4.

 

[mlblacy]

I don't think your lack of calibration is affecting anything, this seems like an embedded profile issue.... there is a difference between converting to a profile and embedding one. If you open a ProPhotoRGB file in photoshop and save it with an embedded sRGB ICC, it will look all wrong (desaturated). You need to convert it to the profile first, then save it with the embedded profile. I think this is where you're getting hung up.

Ruahrc

Take heart, this debate has been going on for years (at least since pshop tweaked it's color management with CS). Also, some good reads here:
http://photo.net/digital-darkroom-forum/00DRb6

And also here: the last line sums it up aptly... "isn't color management fun?"
http://tonysleep.co.uk/blog/the-photoshop-srgb-mystery

It is worse if you are dealing with both print and web professionally, as you have to struggle with the difference in gamma settings of 1.8 for print, and 2.2 for web. Most of my work is in print, so I just keep my monitors set to 1.8. I need to know that what is on screen will match what my printing proofs look like (and they do). You can console yourself with web stuff by knowing that you have NO control over how the stuff will appear, as there is such a huge variation in web viewers equipment, platform, etc... cold comfort I guess.

Oh, and if you want to calibrate your work for printing on your own equipment... calibration is even MORE confusing and frustrating. The Spyder2 suite includes printing calibration as well, and on my attempts to bring my Epson tabloid printer were mostly unsuccessful. Best results were obtained SIMPLY by printing from within pshop, and NOT choosing just to "print", but to "print from preview", and then choosing the correct paper/media settings, and then tweaking from there. My smaller Canon inkjet is dead bang on when I "print from preview".

cheers & best of luck,
michael

 

[Edge100]

I don't think your lack of calibration is affecting anything, this seems like an embedded profile issue.

Case 1 seems all is right as it should be.

Case 2 can you show the exact steps you use? In my CS3 options there is a menu item under save for web which says "convert to sRGB". It's not in the most obvious place. If you don't do this the colors don't seem to look right (regardless of whether or not you embed the profile in the jpeg). I am not sure I believe that the sRGB exported file and re-saved as sRGB in CS4 is really desaturated this does not seem right.

Case 3 this is a browser color management issue. If the files are properly tagged and viewed in a browser that color manages correctly, all 3 files should look right. If you're using a browser that does not manage correctly (example, IE for Windows or Firefox with color management disabled) then the AdobeRGB and ProPhotoRGB will look wrong as you indicate. Because the browser is wrongly converting them to sRGB when it should preserve the original space.

Also I have noticed some times when certain uploading sites will strip the ICC profile out of files when uploading in order to save space. Are you putting these files direct onto a web server or using something like Google Picasa or some other photo sharing website?

When I export files for the web from LR2 I do the following:
Export as a TIFF file in 8-bits and sRGB (I export in TIFF so I'm not saving a JPEG twice, losing quality)
Have LR2 run a droplet in CS3 after it's done exporting which opens each TIFF and adds a border and then saves for web + devices, and preserving the ICC profile.

The results work great for me, again it has nothing to do with monitor calibration.

P.S. there is a difference between converting to a profile and embedding one. If you open a ProPhotoRGB file in photoshop and save it with an embedded sRGB ICC, it will look all wrong (desaturated). You need to convert it to the profile first, then save it with the embedded profile. I think this is where you're getting hung up.

Ruahrc

Thanks; this is very helpful. I'm going to try to run through some of these suggestions (particularly the converting vs. embedding bits)...I'll let you know. This is frustrating to say the least.

 

[Edge100]

I think I've solved the problem, and I think it was related to the embedded profile.

I had previously been evaluating the web JPEGS using a Wordpress site I created for this purpose. Every time I exported to that Wordpress site, either via LR2 directly or via PS, the JPEGS would be desaturated. Converting to sRGB or embedding the sRGB profile in the JPEG did nothing, and the JPEGS looked the same in Firefox or in Safari.

This morning, I exported directly from LR2 to my SmugMug site, and looked at the image in Firefox; again, desaturated (FYI, I'm only noticing this now because I've started doing portraits and my skin tones were all out of whack).

BUT...

I then went and looked at the same SmugMug gallery in Safari and...poof, problem solved. The files looked exactly the same as in LR2 and in PS.

So the problem was related to the specific browser in use, but also due to the fact that I think that Wordpress does not recognize embedded colour profiles.

I should also add that when I exported the AdobeRGB and ProPhoto RGB files from PS using "Save for Web...", they also displayed properly on SmugMug on Safari but not in Firefox.

The moral of the story; exporting from LR2 or PS as sRGB will display proper colours on colour-managed browsers, but only on sites that have proper colour management themselves (just speculating that Wordpress doesn't deal well with colour profiles).

Anyway, it works in SmugMug, and that's what I use for content distribution anyway, so I'm happy. I can't control for other people's monitors, but at least I know I can see what I'm putting out there.

Thanks to everyone!!!

 

[Ruahrc]

Yeah it's a mess with the browsers.

FYI, Last I knew if Firefox found an image with no ICC tag, it assumes it was made in the sRGB colorspace and profiles it like so. Safari, on the other hand, will apply the MonitorRGB profile to any untagged images it sees. So if you create a picture in sRGB but save it with no ICC tag, and open it in Firefox, it should display properly. View the same image in Safari, however, and the colors will not look correct and it is because Safari is applying the MonitorRGB profile to any untagged images.

The ICCv2 vs. v4 thing I think may be coming into play here too but I don't really know much about the issue because I only use Safari and not FF.

It's not really "right" either way, and there are arguments for and against either solution. But it is something to take note of. You can find good examples of this by just playing aroung browsing random PBase galleries because all of the "original" sized images uploaded to PBase retain their embedded profile, but all of the "Small"/"Medium"/"Large" thumbnails that PBase generates have their ICC profiles removed. Therefore, dpeending on the settings of the original uploaded image, you can easily see color differences in some images just by flipping between the original and S/M/L thumbnails.

 

[Phrasikleia]

Yeah it's a mess with the browsers.

FYI, Last I knew if Firefox found an image with no ICC tag, it assumes it was made in the sRGB colorspace and profiles it like so. Safari, on the other hand, will apply the MonitorRGB profile to any untagged images it sees. So if you create a picture in sRGB but save it with no ICC tag, and open it in Firefox, it should display properly. View the same image in Safari, however, and the colors will not look correct and it is because Safari is applying the MonitorRGB profile to any untagged images.

Yes, that is correct. If there is no tag, then Safari uses the Monitor profile, resulting in very unpredictable colors. I have no idea why Apple made that decision.