Color management on the web is complicated a priori, and that for several reasons: you don't control anything anymire! You don't know on what monitor your photos will be displayed, you don't know if this monitor has been calibrated or not, you don't know whether it's a tablet or a computer screen, you don't know which browser your user is using hence if it uses ICC profiles management and finally, last but no least, if it's a wide gamut screen or not! You got the picture...
Key points if you're a beginner...
Here are the key points to remember about color management on the web. The rest of this page is aimed at those who want to learn more.
What's really difficult with color management on the web is to control the display of your images on other people's screens because it is, by definition, impossible. So it's all about finding the best possible compromise, hence the most common one.
If you want your photos to be displayed correctly on all current devices - "sRGB" computer monitors, wide gamut screens, tablets, smartphones - and unlike an old habit, it is thus compulsory nowadays to incorporate an ICC profile to each image shared on the web. It will only be read by web browsers on computer screens but this way, your images will be displayed well even on wide gamut screens. However and because of tablets and smartphones, you need to keep on saving your photos in sRGB because it is the only color space that will be displayed correctly in their browsers because they still can't read ICC profiles except Safari on iOS (2016). I'll explain how to in my page "Information about colors/Save menu..."
And finally, I recommend you to let it go and keep on shooting good photos!
For a long time, the situation was stable, and above all, predictable. Not "theoretically" ideal but predictable. We'd found "tricks" to make our images display correctly on the web. Nowadays, the situation has improved and is not always ideal at the same time. Let's see why...
There's a before and an after wide gamut screens and browsers managing ICC profiles... There's also a before and after tablets and smartphones... When one gets better, the other keeps it from evolving!
Until recently, it was legitimately assumed that color management on the web was impossible. The reason for it is quite simple: browsers didn't bother with ICC profile management. Whether the image was tagged or not didn't change anything. But unfortunately, they all behaved roughly "as if" they were displayed in sRGB because all screens displayed more or less sRGB. Each RGB value in the image was then read into the color space of the screen hence alsmot sRGB. It was very convenient and acceptable. You just had to convert any image in sRGB then save it without its profile since the browser couldn't interprete it. It saved weight at the same time and since I knew the time when flow rates were 56K, it wasn't neglectable!
Now (November 2016)!
Three major changes happened these last two/three years: browsers manage ICC profiles better and better, screens have wider and wider gamuts but more importantly, are either in sRGB, either in Adobe RGB 98 (to sum it up) and... more and more users view images on their smartphones and tablets. And the consequences are very visible:
Safari, Chrome, Internet Explorer or Firefox, in their latest desktop versions only – except one exception and it's an innovation – can now take ICC profiles into account. Images in ProPhoto with an ICC profile are now displayed correctly, whether your screen has a wide gamut or not. Almost incredible when you consider what we had before! Problem: other browsers still can't read ICC profiles, like the browsers you have on your tablet or on your smartphone, except for iOS that features this functionality now. We're almost back to stage 1!
One same photo converted in Adobe RGB 98 for instance, but displayed on a tablet, will be slightly desaturated. If it was in ProPhoto, the difference will be much more obvious. It doesn't help us at all! – even though it depends on the tablet because Surface Microsoft tablets feature Windows 10 and can thus be calibrated.
Now that office browsers can manage ICC profiles, it is not necessary to pay too much attention to wide gamut screens users except by absolutely incorporating your ICC profile in all your images. Unfortunately, the more and more common use of smartphones and tablets and their browsers that are still unable to read ICC profiles require us to keep on working in sRGB with incorporated ICC profile. Too bad, right?
What attitude to adopt?
First, see what it looks like thanks to those six photos on your screen and in your browser:
Now here's my analysis and my recommendation...
Choice of the ICC profile of your image: sRGB, Adobe RGB 98, ...?
Since more and more screens have a wide gamut and are thus able to display Adobe RGB 1998, more or less, and since all desktop browsers – and now Safari on iOS, new! – can read color profiles, why not convert all your images into Adobe RGB 1998 and save them with their ICC profile – compulsory condition – I'm really starting to think about it because it's become technically possible. The problem is that tablets browsers still can't read ICC profiles except for Safari on iOS, and have a gamut close to sRGB (the screen reacts like it's in sRGB). Anyway, I think it's still a sweet fantasy because Adobe RGB 1998 is only wider than sRGB towards greens, so in many cases, our images – with an incorporated ICC profile – would be displayed the same way.
To sum up: I don't have a definite opinion! Do what you think is best. Two notes though: tablets browsers are not always able to read ICC profiles, except for Safari on iOS, but tablets are always more popular and it's safer to make sure to address the majority of users. So we still have to be cautious with what we're doing but we're definitely headed in the right direction, that's encouraging!
Save the ICC profile into the image: essential!
It wasn't compulsory for a long time. It was even recommended not to so as not to add weight to the images. I remember that some ICC profiles were bigger than the image itself! And yes, 4Ko were a handicap ten years ago, when you worked in 56K! It's rather funny when you think about it nowadays!
To illustrate the fact that old habits die hard, Photoshop's menu "Save for the Web" offers to save your image with or without a profile. It is not incorporated by default. So remember to check the box "Incorporate color profile" as in the image here.
Always incorporate an ICC profile to your images shared on the Internet. I describe Photoshop's saving menus in a dedicated paragraph.
Color management and browsers? - Updated on September 08, 2016
CM in V11 (ICC V2 and V4)
Edge Windows 10
CM (ICC V2 and V4)
CM OK but settings below *
Chrome on Android
Safari on iOS
* Particular case of Firefox
The browser Firefox enables to set your color management quite accurately but it doesn't do it with the right default values according to me. Here are my "choices":
1 - "Write "About:config" in Firefox's address bar:
2 - Write "gfx" in the search field just below:
3 - A list of lines starting with gfx then appears below. Look for
"gfx.color_management.mode" and click on it.
4 - When you double-click on the line "gfx.color_management.mode" a new window opens:
Replace the default value "2" by "1".
By doing this; you'll activate a complete color management in Firefox:
If an image contains an ICC profile, it is read and interpreted correctly. The image is thus displayed with the "right" colors, whether your screen is wide gamut or not.
If an image doesn't contain an ICC profile, then unlike the default value "2", your image is automatically assigned the sRGB profile and will thus also be displayed correctly, even on a wide gamut screen.
And finally, I invite you to watch the photos I shared above closely and tell me what you think about them. Personally, I note weird things depending on the browsers and on the monitor displaying this page. All of this is very weird so nothing is really cast in stone!
To be remembered!
To maximize the chances to see photos correctly displayed on all screens in the world (office computers and tablets as well), I recommend you to:
Continue to convert all your images in sRGB... AND save them with this incorporated ICC profile.
If you always like a good game and you bet that the ones who really love nice images will have a calibrated monitor at home, and rarther a wide gamut one, a browser managing colors and a capacity to see Adobe RGB 98 images, enjoy yourself and they also will: work in Adobe RGB 98 with incorporated ICC profile. It is not always necessary though. Anyway, too bad for the ones who don't have such an equipment!
Of course, you wouldn't want these people to have the strange idea to contempanel your photos on their Android tablets... Because only Safari on iOS can read ICC profiles in mid-2016... Except for the notable exception of Surface Pro or Book tablets by Microsoft that operate on Windows 10 and can thus be calibrated with my favorite sensor, the i1 Display Pro.
This website is almost entirely free and yet almost free of ads. Why? Because they look so bad! It is lucrative though, and enables many websites to keep on living. So I asked myself: what can I do? To keep on developing this website, I'm going to need a regular income just like everyone else. How can I keep on giving access to free information like I've been doing since April 2002?
And I finally found the answer: affiliation. Every time you click on a link from this site to one of my partners' shops, they know you've been referred by me and give me a small percentage on your purchase, be it something I recommend on my website or anything else. Remember to use my links when you shop on these sites! It doesn't cost you anything and it's a win-win deal – for me, them, and you!