Colour Management Test

Saved JPEG Files

These are JPEG files, saved using Photoshop’s Save for Web. All are in the sRGB colour space. Some have profiles embedded, some do not. No editing has been done other than to resize them all to the same size and convert to sRGB (even though the image was already in sRGB) or embed profile, or strip profile and all tags with jpegoptim.

In theory, all these images should look the same, and as far as I understand, they should also look the same in Photoshop as they do in a colour-managed browser such as Chrome and Firefox.

Save for Web: Convert to sRGB, do not embed profile

Save for Web: Convert to sRGB, embed profile

Save for Web: Do not convert to sRGB, embed profile

Save for Web: Convert to sRGB, profile removed by jpegoptim

Chrome Screenshot

This is a screenshot of what the above saved files appears like on my Chrome 81.0.4044.138 (Official Build) (64-bit)

All the images do appear the same, but they all appear the same as a non-colour-managed photo. They do not appear the same as they do in Photoshop.

Firefox Screenshot

This is a screenshot of what the above saved files appears like on my Firefox 77.0b7 (64-bit) (gfx.color_management.mode = 1)

All these images should appear the same, but they do not. The two images with embedded profiles appear the same as they do in Photoshop. The other two images appear to be not colour managed.

Saved Files vs Photoshop

In theory all these photos should look the same.

sRGB profile tagged. No editing. Copied directly from camera. (JPEG)

What it looks like in Photoshop (Screenshot)

Save for Web: Convert to sRGB, embed profile (JPEG)

Save for Web: Convert to sRGB, profile removed by jpegoptim (JPEG)

Why does Photoshop look different to Chrome, and how do I fix that? I want to edit images that look a specific way in Chrome and Firefox, but I can't because Photoshop looks quite different to Chrome. I can get Chrome and Firefox to look the same so long as I remove any embedded profiles from images, but I can't get Photoshop to look the same as Chrome and Firefox.

Given that the most important thing is consistency between browsers, as I have no control over which browser a user may use to view my photos, it appears necessary to go with images without embedded profiles, as these at least display similarly on Chrome and Firefox.

This also happens to look the same as turning off colour management in my image viewing programs, and using proof-colours: monitor RGB in Photoshop (though I have not figured out how to do that in ACR)

JPEG direct from camera vs. screenshot of Photoshop

My understanding is that if colour management was working properly, this JPEG should look the same as this screenshot.

sRGB profile tagged. No editing. Copied directly from camera. (JPEG)

What it looks like in Photoshop (Screenshot)

Photoshop: Normal vs. Proof Colours: Monitor RGB

Screenshots of what Photoshop shows when turning Proof Colours: Monitor RGB on and off

What it looks like in Photoshop (Screenshot)

What it looks like in Photoshop with Proof Colours: Monitor RGB on (Screenshot)

Photoshop Colour Settings

Photoshop Save for Web

Screenshots showing what different preview options look like in Photoshop’s Save for Web dialog.

Preview: Monitor Colour (Screenshot)

Preview: Internet Standard RGB (No Colour Management) (Screenshot)