Image colour inconsistency between browsers, image viewers, and Photoshop

Question

Edited in case the question wasn't clear:

Question: How do I get Photoshop, IrfanView and ACDSee to display images the same as they are displayed in the latest versions of Chrome and Firefox (both of which supposedly display untagged images as sRGB with colour-management on)

All images are in sRGB colour space. Default workflow is to open an sRGB image, edit it, and save for web with "Convert to sRGB" enabled. I then strip the colour profile as it should be assumed to be sRGB. However, I have tried every conceivable combination of this - not converting to sRGB, embedding colour profile, etc.

Currently, IrfanView and ACDSee with colour management disabled display the images the same as Chrome and Firefox, and Photoshop with Proof Colours: Monitor RGB displays the same as Chrome and Firefox.

However, enabling colour management in IrfanView and ACDSee causes them to display the images the same as Photoshop, but differently to Chrome and Firefox.

How can I get it so that all three programs display images the same as Chrome and Firefox? Because at the moment I am finding it impossible to edit dark photos - what looks "right" in Photoshop displays darker in Chrome and Firefox.

Note: This is all on my own monitors, which as far as I can tell are correctly set to use their own display profiles - I'm aware that I can't control how other people's displays may be configured.

Note: I'm using the beta of Firefox 77, that has fixed the "bug" where untagged images by default weren't colour managed.

Example photos and screenshots showing what I am seeing

---

I have a problem where dark photos look quite noticeably different depending on what opens them, and specifically, on Chrome and Firefox. I'm aware this is because of colour management differences between programs.

So what I want to do, is make it so that my images look consistently the same between all the programs I use on my computer. Specifically, I want an image to look the same as it looks in a browser, because ultimately that's how my images will be viewed. If I'm ever getting some printed, I'll deal with print profiles and stuff then. For the purpose of this, I only want to be able to view images in browsers, and I want my own viewing experience to mimic that of the browsers people use.

I don't want to make any configuration changes to my browsers - I want them to be roughly the defaults that "everyone else" will be using.

I'm happy to configure every other program I use so that they match, as close as possibly, the viewing experience in a web browser.

I use IrfanView, ACDSee and Photoshop. All support colour management. I'm testing in Chrome and Firefox. Both supposedly support colour management.

But I'm getting vastly different results and after many hours of trial and error, it's doing my head in.

The closest I can get to all the images being the same everywhere is if I disable colour management entirely in IrfanView and ACDSee, and strip the ICC profile from the images so they're untagged (which is my normal workflow anyway), and then use "Proof colours: Monitor RGB" in Photoshop, which is a hassle.

What I want is this:

• I want JPG images which contain no metadata and no ICC profiles (I run them through jpegoptim --strip-all) to display the same in all browsers. In my testing, they seem to do this. (I believe browsers assume they are sRGB)
• I want those images, if I open them in IrfanView, ACDSee, or Photoshop, to display (on my monitor), the same as they display in Chrome and Firefox (on my monitor)

The only way I have been able to achieve this in testing so far is to ensure no image contains a colour profile, and disable colour management in IrfanView, ACDSee, and use "Proof colours: Monitor RGB" in Photoshop. Otherwise any app with colour management on displays the images noticeably differently to the browsers, and Firefox displays images with an embedded sRGB colour profile differently to those without any profile (even though everything on the internet assures me this should not be the case as it should assume sRGB?)

I also want to be able to:

• I want new images I am opening, say from my camera, which probably do contain an sRGB ICC profile, to display the same in Photoshop while I'm editing them as they will display in the browser.
• The only way I've managed to do this is to use "Proof colours: Monitor RGB", which is a hassle as I have to remember to toggle it on for every single photo, and it appears to be impossible to use in Camera Raw, making it pretty hard to do fine adjustment of dark coloured photos in a way that will look consistent in browsers
• I'd also like them to display in ACDSee, or IrfanView, the same as they will when I open then in Photoshop, and ideally the same as they will when they're viewed in a browser (though technically no unedited photo will ever be viewed in a browser, so as long as they display the same after editing, I guess it's ok)

Considering I have (theoretically) calibrated monitors with their own profiles, and Chrome and Firefox and all the apps I'm using are all supposedly colour-managed, it seems like I'm doing something wrong here, but I have tried every combination I can think of settings over the past several hours and the only thing that comes close to being consistent amongst the various apps - most importantly, between both Chrome and Firefox - is stripping the colour profiles from the images, and turning off colour-management in all my viewing apps.

I've read numerous posts on the matter, but sadly, none have really helped.

I feel like this must be a common issue, because a lot of people must be like me and take digital photos, and edit them only for the web.

What should I do!?

Answer 1

As already established, export as sRGB - whether or not you embed the profile is really moot, as with no profile, sRGB will be assumed.

Prior to that work in whatever you got from your camera*. Only convert once at export.

The major error, however, is to use Proof Colours with your Monitor profile. This will apply a double translation & generally look horrible, or you 'fix' your image to look right like that & it will look horrible everywhere else.
You really don't ever need to use Proof Colours in an RGB workflow if your only conversion is right at the end. It will be as close as it's possible to get.

So long as your monitor's profile shows in the list [not chosen, merely available] at Colour Settings > Working Spaces:RGB then your system is aware of it & will apply it already to Photoshop's display output. Here you should set your Working Space to sRGB, then ignore it, you're not really going to use it.
Set Colour Management for RGB to Preserve Embedded Profiles. That way your camera profile will be used right the way through your workflow until your final export.

This, of course, all assumes your monitor is correctly calibrated beforehand, that the icc profile is being used by the system & that Photoshop is aware of it.

*You can probably choose in your camera ahich profile it will work to internally. Mine will do sRGB or Adobe RGB 1998. Some will do ProPhoto, which you have to be careful of because very few monitors can actually display it. I use the Adobe 98 as my monitor can display it accurately. I'd be hesitant to insist you photograph at sRGB if that's all your monitor can support, as you may be missing out on some small aspects of the potential gamut, but you wouldn't be able to see the differences yourself anyway if the monitor can't display them.
Most monitors these days can display 'most of' sRGB, only premium displays will be fully capable of Adobe 98 & very few high end can achieve ProPhoto.

One last trick, in case you ever enable Proof Colours by accident [it's right between Transform & Hue/Sat, so it's not impossible to do] - set your proof profile to sRGB, then you won't wonder what the heck happened later ;)

…and a late thought - most consumer-level printers these days want sRGB images anyway, not CMYK, so you won't even need Proof Colours for those either. I have two regular suppliers I use, one for acrylics & one for canvases. Both produce very acceptable results nicely comparable to my original submissions.

Answer 2

From your description, it seems to me that it is the browsers that are wrong, and the picture vieweres that are right. Which is, in a way, to be expected.

First, even if you are using Firefox 77 which is supposed to have fixed the issue, still check the gfx.color_management.mode setting: it should be 1. If you updated it from a previous version, it may have retained the old incorrect setting (2 or 0). (Restart the browser after changing it: this setting is not applied live).

Make sure the OS has a proper display profile installed. Then enable colour management in ACDSee, Photoshop etc. If there is an option re missing profile (I think ACDSee has it), set it to sRGB. Do not enable any proofing. Now, if they match between each other (e.g. ACDSee vs Photoshop), trust them and not the browsers. Dig into browsers' settings, ask developers, submit bugreports.

If you are worried that web users will see your photos differently, alas, you won't make it better by matching your (apparently non-managed) browsers. This is the legacy of neglecting colour management for decades.

One more thing: if you see significant brightness differencess in the shadows (i.e., wrong gamma), your display settings may be incorrect. Ideally, you should be able to adjust display controls (if you have any) such that the gamma was approximately right, with only colours being off. Then you calibrate it with these settings.