optimizing colors for web viewing (when editing on Adobe RGB monitor)

[doffography]

This is my first post here. I did try to search here and online but I apologize if this has been brought up before and possibly should be in a different forum (like color management).

I have a BenQ monitor that I have used a calibrator to create a custom color setting. When I edit these pictures on my monitor in either this custom setting, the default setting or Adobe RGB color mode and view them on a different screen like a laptop or mobile phone they are always less saturated. I would take a guess that it is because of the larger color gamut of my monitor and warmer settings because if I switch to the sRGB color mode on the monitor then it matches other screens more accurately. I am wondering what you all do to edit pictures for a website instead of for print. I have started using this sRGB color mode on my monitor and then increasing the vibrancy much more than I normally would to try and get it to match. Just trying to figure out if this is normal or if I am missing something.

Background info: I am shooting RAW images in Adobe RGB, editing in Lightroom then Photoshop, exporting as jpeg and converting to sRGB with profile embedded.

[digitaldog]

The look wrong because you're viewing them without prior color management.
See the video below, it equally applies to a wide gamut display as it does to an sRGB like gamut display:

sRGB urban legend & myths Part 2
In this 17 minute video, I'll discuss some more sRGB misinformation and cover:
When to use sRGB and what to expect on the web and mobile devices
How sRGB doesn't insure a visual match without color management, how to check
The downsides of an all sRGB workflow
sRGB's color gamut vs. "professional" output devices
The future of sRGB and wide gamut display technology
Photo print labs that demand sRGB for output


High resolution: http://digitaldog.net/files/sRGBMythsPart2.mp4
Low resolution on YouTube: https://www.youtube.com/watch?v=WyvVUL1gWVs

[doffography]

First, Andrew thanks so much for taking the time to respond. It seems like after viewing your message that I probably should have posted in the color management forum instead since that seems to be the issue here.

I do have some follow up questions, but I get that they might not be simple answers. If you could point me to additional resources so that I could educate myself better that would be awesome. Ok so questions are:

1) You say I am viewing them without prior color management. I am wondering what I could do for prior color management? Is that something that would happen when importing the images from my camera to lightroom and/or when saving the image to jpeg? I think there is some missing piece to my workflow that I am not getting. I somewhat understand creating color profiles for an output device like a monitor but should I also be creating one for my camera (Nikon d850)? I'm a bit lost here.

2) Do you have any other recommendations or links to information about how to best ensure that viewers of my website are seeing the colors I intend them to see in my photos? From the presentation you created it seems like that is impossible if the browser isn't color managed. But lets say it is and they are viewing the website on Chrome.

Once again I really do appreciate your time and help. Just starting to get into this world of color management can be daunting. I had figured that getting a wide gamut display and calibrating it was the biggest hurdle but that seems to be just the beginning.

[digitaldog]

A color managed web browser will visually match what you see in Lightroom, Photoshop etc. So when you say there is a mismatch, my assumption is, you're not using a color managed web browser but we need more details of your workflow.

[Slobodan Blagojevic]

... if I switch to the sRGB color mode on the monitor then it matches other screens more accurately... I have started using this sRGB color mode on my monitor and then increasing the vibrancy much more than I normally would to try and get it to match...

You answered your own question. There doesn't seem to be anything wrong with your workflow.

[digitaldog]

You answered your own question. There doesn't seem to be anything wrong with your workflow.

The other screens should closely match in any working space if they are color managed.
Depending on the other screens, their gamut can match or exceed Adobe RGB (1998) and certainly sRGB. My iPhone does. My iPad does. The image data also has to exceed sRGB gamut to look slightly less saturated on the sRGB color managed device compared to the wider gamut device. Anything else within sRGB gamut should closely match with color management.

[doffography]

Once again, thanks for all the feedback. It helps a lot to talk this out with people that are knowledgeable. Brief overview of workflow. Shooting in RAW on Nikon camera (in camera color space Adobe RGB) => import raw images with Lightroom=> edit in Lightroom and export to Photoshop => Photoshop color space is set to ProPhoto RGB since that is the default export setting for Lightroom=> export as jpeg from Photoshop with convert to sRGB selected

Here are some experiments I have done. Four different saved jpegs, one with only convert to sRGB selected, one with sRGB and the profile embedded, one with neither selected, and one with only embed color profile selected. When viewed on my wide gamut display monitor in Chrome all of the images look exactly like they do in Lightroom/Photoshop except the image that is not being converted to sRGB and there is no embedded profile. That image is much duller. Now when viewing all four of these images on a laptop or on my iphone in Chrome, all of the images are less saturated. The one that wasn't converted to sRGB and had no embedded profile is as expected even more dull than the others.

So that is an overly confusing paragraph that seems to indicate that the issue is with the screens themselves and not the conversion to jpeg or the browser. Does this mean that those screens can't display the full range of sRGB colors? I can't think of another explanation. So if I over saturate to compensate for those screens on some screens like my monitor the images will just look ridiculously overdone. Hopefully eventually all screens will be Adobe RGB and this won't be an issue.

[digitaldog]

Once again, thanks for all the feedback. It helps a lot to talk this out with people that are knowledgeable. Brief overview of workflow. Shooting in RAW on Nikon camera (in camera color space Adobe RGB) =>

First off, that plays zero role on the raw data. It's only a setting that affects the camera processed JPEG. Yes, it affects the Histogram on the camera but that's not a raw Histogram so it's a lie about that data no matter what you set.
Yes, you're rendering from raw to ProPhoto RGB; that's good. We can go into why if you wish. But stick to that plan.
Now you save a JPEG that you've converted to sRGB and to a size necessary to post to the web. That too is all good.
That they don't match Photoshop or Lightroom is the issue with your browser! And saving as sRGB as indicated in the video isn't an insurance of proper color previewing UNLESS the browser is color managed. Yes, sRGB is the best solution for viewing data on an sRGB like display without color management. But the opposite is true on a wide gamut display again as outlined in the video. If you view sRGB on a wide gamut display without color management, it looks wrong. If you view Adobe RGB (1998) on the same display, it looks 'better' but again, without color management, there is zero guarantee it will match what you saw correctly in LR which is color managed.
So your issue is the browser I believe based on what you're telling me (and no, setting the display to sRGB as incorrectly suggested is throwing the baby out with the bath water and doesn't really fix anything. It goes to the sad fact that, the reason there's so much ignorance on the subject of color management, is that those who have it are so eager to regularly share it!).
Chrome is not a color managed browser; dump it.
https://cameratico.com/guides/web-browser-color-management-guide/

[digitaldog]

Hopefully eventually all screens will be Adobe RGB and this won't be an issue.

No. The issue again, as outlined in the video is a lack of color management. Adobe RGB (1998) and sRGB, ProPhoto RGB or any color space that's tagged to define it is an unknown attribute outside of color management and color managed software. It's like if I started replying to you in a language you don't speak. Without a color managed application, sRGB like any color space is unknown. The display profile used for producing previews doesn't apply. The RGB values are set straight to the display. So again, the issue and fix are easy: use color managed applications (browsers and otherwise). Then they match what you see in color managed applications (at the same zoom ratio). It's really as simple as that. Keep the display calibrated for a desired behavior FULL GAMUT.

[doffography]

I can make sure to use Firefox, however what I personally see is not the issue. I want to optimize the picture as best as I can for the viewers of my website without making them install software. As Chrome is dominating the market that is the most likely browser they will use. When you discuss color management does that include screen calibration? Is Firefox able to detect what screen you are using and install an appropriate color profile for that monitor? While it would be great if I could calibrate everyone's monitor to look like mine, it seems more plausible to calibrate my monitor to more closely match what I am seeing on other screens. I am very new to all of this so it is cool to find a place to talk this out.

[digitaldog]

1. Yes.
2. Not really in an ideal manner. The current display profile, good, bad or ugly is used.