Accurate Colour?

Like most who promote their businesses or their work on the web, I want my images to look as good as possible when viewed.  Many users, including those who work with images, want to see accurate colour when they browse the web.

We quickly notice poor colour reproduction of natural objects like skin, foliage, fruit and vegetables and in neutral tones. Images like this should look natural and without unwanted artificial colour casts.

Most serious and (hopefully) all professional graphics and imaging users will be working with monitors which have been profiled and calibrated to ensure that the colours displayed are as close as possible to how the image was intended to look.

Colour management is a bit of minefield and you can find many forum threads out there discussing colour management issues related to different browsers and different software, hardware and monitor configurations on PC and Mac platforms.

Images should be tagged with an embedded colour profile to ensure they are displayed accurately in colour managed applications like Safari, Firefox and Photoshop.

The appropriate RGB colour profiles for web use and for images destined for press-printed materials are different. Using images on your website that have been prepared for printing  will mean images may look washed out.

 

 

 

 

Here are simplified tips for seeing accurate colour and, if you are putting images onto your own website or blog, how to increase the chances of them being seen properly by your viewers.

Preparing images :

1. For the time being, images for web use should be converted to the sRGB colour space, with the sRGB profile embedded (“tagged”). Make sure you choose to embed the profile when saving in Photoshop. If the profile is stripped out later (by content management software or by a web designer), or if the image is viewed in a non colour-managed browser or application, then it will usually be displayed using the monitor colour space, which historically has been sRGB (but see below). So if the image is sRGB, good.  If its not, then the image is likely to look washed out.

The advent of new wide-gamut flat panel monitors does now mean that sRGB images are likely to look oversaturated in browsers and applications that are not using an embedded profile in the image, but for the time being I am sticking to sRGB for web images.

2. If you have commissioned images and they look disappointing on the web, speak to your photographer or the person preparing them for your website.  For my clients I provide images suitable for the purpose they are going to be used for.

 

Viewing images :

3. Use a colour managed browser. Safari has been colour managed for a while and is colour managed by default.

Firefox has support for colour management although there have been some problems and changes to default behaviours in recent versions and colour management has to be enabled. I use this add-on to ensure Firefox colour management is enabled properly.

I am not a PC user, but colour management in Internet Explorer has to be enabled.  At the moment, Chrome is not colour managed.

4. Be aware that many laptop screens and many cheaper monitors, even when profiled (see point 5) are not capable of displaying colour and tonal transitions anything like as accurately as quality external monitors.

5. If you are even half-serious about seeing good colour, invest in a good display and get it profiled. Capable display profiling devices like this one can be bought without breaking the bank.

6. If you use a Mac with an external monitor as your main monitor, then as well as ensuring the external monitor is profiled, you need to ensure it’s your default display for colour management purposes. This isn’t as simple as dragging the menu bar across in Display Preferences. You need to open ColorSync Utility and in Devices, set your external monitor to Default Display.