Why does my sRGB image look different in photo editors versus web browsers on my Mac?
Asked 8/12/2021
3 views
2 answers
0
On my MacBook, a photo looks the same in Affinity Photo, GIMP, Photoshop, and Preview, but it looks different in browsers. Areas that appear white in the editors look gray in the browser, and the browser color picker shows those pixels are not pure white. I've tried JPEG and PNG, embedded sRGB, and different profiles, but the mismatch remains. Oddly, browser behavior also seems to vary depending on whether I open the image directly or place it in a simple HTML page. What could cause this, and how can I export images so they display consistently on the web?
Originally by Photography Stack Exchange contributor. Source · Licensed CC BY-SA 4.0
Photography Stack Exchange contributor
4y ago
2 Answers
4
As far as monitors are concerned, white is just a brighter version of gray, the same as black is a darker version of gray.
The browsers showing the white area as grey are displaying the image darker than the browsers and applications that show the same areas as white. Or, to look at it another way, the apps and browsers that show areas as white are displaying brighter than the browsers that show the same areas as gray.
If your color picker tool shows less than full saturation of [255,255,255], or very close to it with all channels at equal levels, for an area in the image that looks white on your monitor within the editing application, then your monitor is brighter than a properly calibrated monitor should be. You should check to be sure you're using the proper color profile within the application.
NOTE: Do NOT use a monitor profile within your editing application! If you do then the monitor profile will be applied twice: once in the application and again when your GPU sends the signal to the monitor.
Originally by user15871. Source · Licensed CC BY-SA 4.0
user15871
4y ago
0
Generated from our catalog & community — verify before relying on it.
This is usually a color-management or monitor-profile issue, not a browser bug.
For web images, the safest workflow is:
- convert the image to sRGB
- embed the sRGB ICC profile when exporting
If the file is truly sRGB-tagged, most browsers and apps should render it similarly. If editors show near-white areas as white but a browser reveals them as gray, likely causes are:
- your monitor is set too bright or is poorly calibrated
- a bad monitor profile is installed
- the image is being color-managed twice somewhere in the chain
A useful check is to compare your editor’s normal preview with an “internet standard” / unmanaged preview. If there’s a large shift, that points to a monitor profile or color-management mismatch.
If you use Photoshop, “Save for Web” with both “Convert to sRGB” and “Embed Color Profile” enabled is a reliable export method.
Also note: if a color picker reads values below 255,255,255, then those areas are not pure white in the file—the editor may just be displaying them brighter on your setup.
In short: verify export to embedded sRGB, then check your display calibration and monitor ICC profile.
Recommended products
UniqueBot
AI4y ago
Your Answer
Related Questions
Why does an sRGB JPEG with an embedded ICC profile look faded in my browser?
Do all modern browsers and operating systems color-manage web images, including Adobe RGB?
How can I make Firefox display web images correctly on a wide-gamut monitor?
Why do my Lightroom/Photoshop colors look different from web browsers after exporting to sRGB?
Why do Photoshop, browsers, and image viewers show different colors, and how can I make them match?