Why the colour in your photos may look odd on the Web
If you have noticed that your photos don't look the way you expected them to when they're posted onto the Web, or viewed in certain programs, it's possible that the problem is down to colour management. This article explores the ups and downs of colour management.
Is your screen calibrated?
If your screen is properly calibrated, then skip to the main part of this article! But if it isn't, or you don't know (assume it isn't in that case), in other words if don't use a monitor calibration device or other method to ensure that the colour reproduction of your monitor display matches industry standards, I urge you to get into the habit of calibrating your monitor. An uncalibrated screen can lead to all sorts of pitfalls for anyone interested in photos with accurate colour and tone, especially if you want others to see your photos as you see them on your screen - on their screens, and to enjoy prints that reproduce colour faithfully
You can get a digital monitor calibrator like the Pantone Huey for as little as £58 or $70 if you are in the US. Even better, get a Datacolor Spyder3Pro or an xRite or GretagMacbeth i1. If money is no hurdle, get an i1 Pro or an xRite/Pantone ColorMunki. If are on a really tight budget, look out for second hand deals on eBay for things like the DataColor Spyder 2, or the Pantone Huey. If you can't spend any money at all, search for free monitor calibration wizards, like the one from Hex2Bit, or Adobe Gamma (bundled with older versions of Photoshop). They are better than nothing, but a hardware calibrator is by far the best.
So what's the problem?
Have you ever noticed that a photo you have painstakingly worked on to show its best in your editing application, like Photoshop, ACDSee, Lightroom, Aperture, PaintShop Pro, etc., sometimes looks different on the Web, or more accurately, when viewed using a Web browser? Have a look at the comparison below:
(Click above to for a larger view in a new window)
The picture on the left was edited in Adobe Photoshop Lightroom and you can see it in Lightroom on the right. You should be able to see a subtle difference between the colour in both renditions of the same image. On the left, the photo is displayed in Windows Photo Viewer. It would look exactly the same in Microsoft's Internet Explorer Web browser, and in many other Web browsers. There is much more red in the Windows Photo Viewer rendition. The picture is cooler and has more contrast.
Now look at this comparison:
(Click above to for a larger view in a new window)
This time we're comparing the view of the same photo and this time using the Mozilla FireFox browser on the left. You should be able to see that the two views of the image look the same. This is because FireFox can be configured to respect colour management profiles. At the time of writing you couldn't do this with Internet Explorer, nor Windows Photo Viewer. Another browser that is colour management compatible is Apple's Safari. Both are available in versions for Windows and Apple Mac computers.
How does colour management work?
In simple terms, the colour values in the pixels of an image need to be mapped to the correct colour values that are output to whatever display method the image is headed towards, be it a computer display, or a hard copy print out. To do this colour matching a table of colour values needs to be generated for each component of the colour system. These tables are called colour profiles. Not all profiled components have the same range of colours, or colour space, as others.
Colour profiles exist in measured and theoretical 'spaces'. A measured space could be a printer profile or a monitor profile. Each measured profile is unique to that device - and in the case of a printer it's unique to the measured colour rendition of the device (printer) combined with the type of printer paper used.
sRGB colour space.
A theoretical space, or 'standard' space is a specification of a pre-set range of colour. Examples include Adobe RGB, and sRGB. Adobe RGB can accommodate a wider range of colour than sRGB.
With colour management the aim is to ensure that colours from one end of the pipeline (starting with the camera or a scanner) are reproduced as accurately as possible at the other end of the pipeline (via a monitor display or hard copy print out). The use of standardised colour spaces like sRGB and Adobe RGB means there are industry standard spaces that form common reference points for colour management. This is why your camera offers you at least a choice of sRGB colour space and often an option of the wider Adobe RGB space.
See how the Adobe RGB space (plotted in yellow) exceeds that of sRGB). Adobe RGB can accommodate a greater range of green and cyan hues, as well as slightly more yellow, only in the areas of red and magenta are they basically the same.
How much of the designated colour space is used up by a given photo depends on the content of that image. With sRGB, most modern cameras can produce colours that exceed the range of the sRGB space. Even the wider sRGB space can be exceeded by many cameras, and there are wider colour space standards, like Pro Photo RGB, to accommodate the improving colour ranges being generated by cameras.
If you want to edit and enhance your photos in an image editor, it's very desirable for that editor to be compatible with standardised colour spaces, like sRGB and Adobe RGB. If you decide to reduce the red or increase the yellow, for example, in an area of your image, those colour changes need to be mapped accurately and within the colour space that has been applied to that image. On top of that, these colours need to be represented accurately on your screen as you change them. A colour managed application will map the colour in your image accurately to the colour profile for your display, resulting in true colour on your display. But this will only work properly if the image editing application understands standard colour spaces (sRGB and Adobe RGB) and can work in harmony with output profiles (for displays and printers) - and of course only if the output profiles are properly configured through device calibration.
Here is the colour space (plotted in yellow) claimed by a low cost monitor with a limited colour gamut. You can see that on the whole its colour space lies within that of sRGB. Only in the cyan part of the spectrum can this monitor match or exceed sRGB, and even then it's only in part.
With a wide gamut monitor much of its measured colour space (plotted in yellow) exceeds that of sRGB, and portions even exceed Adobe RGB.
While the concept of colour management sounds very sensible, there are big gaps in the application of colour management. As previously mentioned, many Web browsers are not colour managed despite the fact that the Web is teeming with photos. And many system imaging tools, like Windows Photo Viewer, for example, are not colour managed either. This explains why when using such non-colour managed applications that we sometimes don't see the colours we expect.
If you display an image that conforms to a standard colour space, like sRGB, in an un-managed display environment, the colours in that image are mapped inaccurately to colours in the display profile. Sometimes a range of colours will be artificially boosted and other colours become suppressed. Contrast and even brightness can be affected too. In my own case I see a reduction in yellow and an increase in the saturation of reds and blues, as well as an increase in contrast.
You may also have seen warnings about assigning Adobe RGB colour space to images destined for Web pages. This is because there is a higher risk of mis-match between the wide gamut of Adobe RGB and typical narrow gamuts of display monitors. This often results in colour shifts, desaturation and a loss in contrast.
If you don't generally notice these problems when displaying standard sRGB images on the Web, there are two possible explanations; a) you are using a colour managed Web browser like FireFox (although its colour management needs to be enabled) or your monitor space happens to match sRGB space fairly closely. If the monitor space is smaller than sRGB the colour mis-match produces a less prominent visual distortion of the colours.
A third possible explanation is that you have decided to assign the colour space of your display to your images. This will disguise differences in the display of images in colour managed and non colour managed views, but only for you, when you view your photos on your display. For practically everyone else the pictures will look wrong.
The solution, of sorts
In an ideal world. we would all have properly calibrated monitors, and we would be using colour managed Web browsers, image viewers, and image editors. This would let us display images, in any colour space we choose, at their very best on the Web and there would be minimal problems concerning the accuracy of rendition from one screen to another.
Unfortunately, this is impossible to guarantee at the moment. So it's still advisable to create photos using sRGB space for Web use as this will tend to minimise colour issues for the majority of people using run of the mill displays. I'd also strongly advise everyone to use a colour managed browser like FireFox or Safari, ensuring that colour management is enabled. This will avoid seeing colour problems with your own images on the Wen and with images produced by others too.
The subject of configuring FireFox for use in colour managed mode was covered in the DPNow forum some two years ago - so you can gauge just how long term this issue has been and, I suspect, will be!
Nincsenek megjegyzések:
Megjegyzés küldése