Color management guide by Arnaud Frich

Manage colors with Photoshop and Lightroom
Manage colors with Photoshop
   
   
   
   
   
    Color management with Lightroom
    Printing with Lightroom
   
    Choosing Photoshop workspace
    sRGB, Adobe RGB or ProPhoto?
  Fleche Color management on the web? - Updated
    Color management on your camera - Soon...
    Color management in Camera Raw
     

 

Generalites about colors Screen calibration Printer calibration Manage the colors with Photoshop Go further and know more

shim
3/4
Shim
Updated on November 25, 2016
 

Color management for web browsers?

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.

My professional site!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!

Next key points: Print with Photoshop suivre


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...

top

 



A bit of history first...

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!

Before...

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)!

Wide gamut screenThree 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?

top

 


What attitude to adopt?

First, see what it looks like thanks to those six photos on your screen and in your browser:

 

Incorporated ProPhoto   Incorporated Adobe 1998
     
Non incorporated ProPhoto   Non incorporated Adobe 1998
     
Incorporated sRGB   Non incorporated sRGB

 

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!

"Save to convert to sRGB" menuIt 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.

My recommendation!
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


Browsers Color management Note
Safari MacOS
3 stars
CM OK
 
Internet Explorer
3 stars
CM in V11 (ICC V2 and V4)
  Edge Windows 10 3 stars CM (ICC V2 and V4)
 
Firefox (48)
3 stars
CM OK but settings below *
 
Chrome (53)
3 stars
CM OK
  Chrome on Android No CM No CM
 
Safari on iOS
3 stars
CM OK
  Android No CM No CM


*   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.


Pointilles


   
 

 

 
 

 

$199.00

  Buy the best colorimeter : the i1Display Pro !
Read my full review Suivre
 
 

 

From $120,00
to
$4,500.00

 

top

Shim
Contents > Manage colors > Web color management > Next...
shim

 

 
 
 

This site is entirely free of charge and yet almost free of commercial ads. Why? Well because they're ugly! So apart from this banner, you won't find any other commercial spaces. But you have to admit that advertising is pretty profitable and that it enables many websites to keep on living.

So I asked myself the question: what can I do since this website can only continue its growth generating regular incomes, like all other websites. How can I keep on giving access to all this information for free, which I've historically been doing since April 2002 (in french)?

Well thanks to affiliate programs. Meaning that every time you click links from this site towards my partners', Amazon.com, B&H, etc, they know you're referred by me and give me a small percentage on the sale. It doesn't cost you anything! Everyone wins: you, them, me. And also, feel free to contribute here:


  Thanks for your visit and your support!  
     

 

  Home

     
 

Home page |  Summary  |  Novelties ! |  Legal information  |  Contact me

French version 

 
Generalities
Calibrate a monitor
Calibrate a printer
Manage colors