Basic colour management for display on the web

03/04/2010 - 13:22
Bookmark and Share


At some point in your photographic career, you will probably find that your photos don't look the way they are supposed to. Colours and contrast levels can change, and it can be really frustrating. This is all down to colour management.

Colour management is a minefield. There's a myriad of profile choices (which is a way of telling a computer how to show a colour on the screen), and it can be really confusing knowing which one to use. There can be problems any time a specifc colour is shown in a different format: the camera records slightly differently to our eyes. The colours change when the photo is displayed on the back of the camera, and they change again when they appear on your computer screen. If you then try to print, they will change again. "Colour management" descibes the degree to which you try to reduce the changes, so that you can accurately show them the way you see them. In this post, I will try to explain how to stop the colours from changing when you post images online.



ABOUT COLOUR PROFILES

Even if you use the same computer to process and view your images, they can be displayed differently depending on how you are looking at them. Some web browsers struggle to display certain profiles. There are millions upon millions of different colours that we can see, but to keep files to a manageable size, there is a much smaller collection of colours that browsers are designed to handle as a standard. This standard is called "sRGB", or to give it its full name, "sRGB IEC61966-2.1"

Whilst most basic compacts record images using these standards, many high end cameras can use "Adobe RGB" to record. This profile is much bigger, so it can capture more colours. This means it has a lot of colours that sRGB doesn't, but many of those that it does. To confuse things even more, some cameras use an entirely different profile. 

When the image profile has colours with a perfect match to the browser profile, they are displayed properly. If a computer can't find a profile match to a colour it knows, it will try to "round off" to a colour it can display. If it can't do that, it chucks out the colour. If you try uploading a photo in Adobe RGB, then it may look flat on some browsers and monitors. This is because it's been told to show off in sRGB by the browser. The browser has assigned a profile, without being told how to change to colours properly.
 




You can put on a fireman's suit, but that won't make you a fireman. You need training. With colour profiles, it's the same. You can assign any profile you like, but that won't make the changes necessary to convert one colour to another. For this, we use photoshop.



PHOTOSHOP'S PROFILE OPTIONS

Photoshop has two main options for dealing with colour profiles. They are both under the "edit" tab, and are called "Assign profile" and "Convert to profile". There is another way of converting your colours, but we'll look at the differences in these options first.

"Assign profile" brings up a simple list of options, but you must remember that is primarily intended for colour-calibrated monitors.

 



Choosing a profile from this list will alter the appearance of colours in your photo. It's fine to choose one of these to suit your preference (it's optional), but our fireman still needs his training. However, re-assingment of profiles does not harm the image, and you can do it as many times as you like.

Before you upload an image, it is best to convert the colours yourself, with "Convert to profile". When you choose any of the options in the drop-down box, you will not see any change in the colours of your photo. To give the best results on most browsers, you should convert the profile to sRGB (IEC1966-2.1). I never worry about the other options in the dialogue box.





Note that other RGB formats (such as Nikon RGB, ProPhoto RGB or e-sRGB) are not the same as sRGB IEC1966-2.1, and may still cause colour variations on some browsers.

Converting a profile changes the colours, so you should try to do this only once. It is best to make a copy of your file before you convert the profile for upload.



WHAT HAPPENS IF I PICK THE WRONG OPTION?

The image below will open in another window. It shows an image which has been shot in Adobe RGB. The flatter, duller version on the left has been assigned an SRGB profile, whilst the one of the right has been converted to SRGB. Now that it has been uploaded, you can see that the converted colours are brighter and punchier, and accurately show the document as it was in photoshop.





Personal preferences change, so some viewers may still prefer the version on the left. However, you can't predict the changes that will take place if you don't convert the colours yourself.



SAVE FOR WEB


There is another way to change all of this, and in many ways it is an easier option. Using the "Save for Web & Devices" command allows you to easily make a copy of an image that is optimised for web browsers. It lets you resize, set compression rates, and convert the colours all in one go. Photoshop will remember if you've checked the box, so you don't have to remember to convert the profiles on every image.
 






EXAMPLE OF WORKFLOW

1. Shoot in Adobe RGB




I shoot in RAW format, in the Adobe RGB colour space. This takes in much more colour information than the sRGB format. You can ditch the info you don't need, but you can't put it back if you didn't record it.



2. RAW conversion - open as Adobe RGB




After opening an image in Adobe Camera Raw (ACR), you will find a blue bar under the image which lists the active colour profile and size of the image. With ACR, any change here is treated like "assign profile", but it will remember your preference for the next time. When you click "open" the assigned profile is applied to the new image in the main Photoshop program. I always open images in Adobe RGB, so that I don't end up with sRGB by mistake later.  Opening an image will create an XMP sidecar file, which remembers your image settings without altering the RAW file.



2b. (optional) Save a TIFF copy in Adobe RGB

I do most of my adjustments in ACR, but if I wish to do any more work in photoshop (eg. filters) that cannot be saved in XMP format, then I save a copy as a TIFF. I never save this as sRGB, as this discards colour information.



3. Choose output option

If I'm printing, I leave the colour space as Adobe RGB. I currently use Epson printers, and these work best with the Adobe profile. Check your printer for advice (I don't calibrate my monitor or use specific paper profiles at present, but get predictable results by using the same inks and papers every time).

If I'm going to be uploading an image to the web, I convert the profile to sRGB. I usually use "Save for Web" to do this.



Colour management is a large and complicated topic, but with a little understanding of how profiles work, you can ensure that your online galleries are presented in the way you imagine them, with punchy colours and good contrast.
 
Bookmark and Share

 



 

Comments

Angie Barnett
04/04/2010 - 12:33
Thanks David....another clear and easy to understand tuturial. The pictures help so much to somone like me who has problems understanding from plain text....love your little cartoons too ;)

Add a Comment

Name:

Email (not displayed):

Message:


Enter the 2 words above: