Why do the colors of my image look different on your monitor than mine? This has been one of the most frequently asked questions since digital photography has existed and images have been exchanged and viewed over the Internet. And anyone who has ever printed out their pictures - either on their home printer or from a professional photo service - may have been disappointed with the colors and wondered why that was.
The answer to both questions is very simple: color management. But that's where it ends with the simple answer. There are thick books on this topic and if you turn on Google you will see many good, in-depth websites.
However, in conversations with people who are dealing with this topic for the first time, I often notice a lack of basic understanding. That's why I would like to use the following explanations to explain the basics of color management in as simple a way as possible - at least try to.
Let's assume you took a color-correct image in a controlled lighting environment. You have this, for example by using a gray card corrected. How can you be sure that your image is displayed correctly on your monitor? Actually just by calibrating your monitor. There are so-called colorimeters for this. These measure defined colors on the screen and use them to create a correction profile - specifically for your monitor. Now you can be sure that the color of your image is displayed correctly on your monitor. (Yes, I know that I'm ignoring the influence of the ambient light here, for example, or the quality of the monitor, which may not be able to display all the colors - but I just want to explain the matter.)
How do you ensure that your guaranteed color-correct image is displayed correctly on your friend's monitor? Correct: he also has to calibrate his monitor individually.
And yet there is still a source of error: namely the program that displays your image. This program - often a web browser - must also be able to handle color management. Two factors are always crucial for the correct color display: firstly, the profile of the monitor and secondly, the profile of the image.
Yes, the image also has embedded information about the colors used. In general, this is referred to as the color space. You may have heard the terms sRGB, AdobeRGB or even LAB. Simply put, colors are defined by these abbreviations. Anything more detailed would go beyond the scope of this introduction.
If the program that displays your image cannot read the embedded information about the colors used, then the image will not be displayed in the correct color despite a calibrated monitor. It is then said that the program does not handle color management. The image above may show you the effect: do the colors match the color names? Congratulations, your image display program has color management. If not, try displaying the image directly in the file directory. I could bet it looks different there. (EDIT: Most browsers are now capable of color management, otherwise you wouldn't see the font in the corresponding colors in the image above - as indicated in the post image at the top.)
So you always need two profiles: one for the colors used in the image and a second so that your monitor can display the colors used correctly.
The same applies to printers: they also have to be calibrated and are given a special profile for the correct representation of the colors. Nevertheless, the printer must also be able to evaluate the embedded profile of the image so that a correct image comes out and you are not disappointed with the colors of the image.
Finally, a tip, because you can't assume that everyone is sitting in front of a calibrated monitor: eliminate as many sources of error as possible. If you show images on the Internet, you should give your images the sRGB color space, because these are the colors that are used if the program you are using cannot manage color and are most likely the colors that a monitor can display be able to. The lowest common denominator, so to speak - with one exception: if no sRGB color profile is included in the image and the viewer is sitting in front of a monitor with wide gamut, then the image will be interpreted as AdobeRGB in a program without color management and therefore displayed too colorfully.
Man Stefan, you are developing into Kwerfeldein II 😛
What's easiest for the web is to leave out or eliminate the profile altogether. This goes automatically to the pencil in Photoshop when you save it for the web.
Pattn, it still doesn't work: A photo without a profile is displayed completely differently on my home computer than on my company computer.
Why? Because my home computer lives in AdobeRGB (wide gamut monitor) while my work computer lives in sRGB. And if an image doesn't have a profile, it will display differently depending on the surrounding profile.
As a result, the images on the web look pretty wrong on a wide-gamut monitor.
Just yesterday I had exactly this problem: a photo in Chrome had a slight green tint. Firefox and Safari displayed it correctly.
I solved it temporarily by exporting the image from Lightroom not with sRGB, but with the Display color profile.
But is this a sign that my display is not properly calibrated? Unfortunately, I haven't fully understood my problem yet, but I think it's nice that you explain a few things here. 🙂
I think your monitor can display sRGB very well and something went wrong during the previous export. 🙂
To summarize the many lines before: If you want to ensure that your image displays correctly on the web, then make sure that your image looks correct in sRGB mode. Because all browsers can do sRGB and if a browser can't manage color, it interprets the image in sRGB mode.
@Stefan Groenveld, Okay, thank you very much.
I'll see what exactly happens when exporting. 😀