Colour Accuracy in Product Photography for the Web

Home/Nikon, Photographic Equipment, Products, Technology/Colour Accuracy in Product Photography for the Web

Colour Accuracy in Product Photography for the Web

Bear with as they say, sorry if this is going to get a bit technical. I think it’s useful to go through this though, whoever you are using as a photographer.

Calibration

We live in a world where much around us is fairly calibrated, the speedo on my bike will ideally concur with the speed gun that the policeman is pointing at me so I don’t really feel too bad about the outcome, I hope my home heating thermostat is reasonably accurate and the cooker certainly needs to be.

The visual world is a bit odd though, brains adapt to the prevailing conditions. Look at a red light for a short time and then look at the rest of the world, it will seem green for a while.

Eyes can perceive many colours that can’t necessarily be shown on a screen let alone be printed well. Some colours that can be printed easily (using cyan, magenta, yellow and black) can’t be shown on a screen well (using red, green and blue), and some colours that work on screen can’t be printed well if at all.

CIE1931xy_gamut_comparison.svg

Those in a professional photography environment, if they are taking colour seriously, use high-end gear and closed loop calibration. So, although I use Mac laptops I use Eizo monitors because they show more of the visual spectrum than a Mac, they are ‘wide-gamut‘ monitors. I also calibrate the monitor regularly to ensure accuracy. This entails displaying a range of standard colours and hues on the monitor and measuring what the screen displays via a calibration device. An ICC monitor profile is set up and referred to by the system, so, if the screen isn’t showing red quite right the profile tweaks the system a little to correct it.

Monitors are RGB devices, so, 255(Red), 255(Green) and 255(Blue) gives pure white whereas 0(R), 0(G) and 0(B) is pure black, if all the numbers are similar then the colour will be black, white or a neutral grey in between.

Amazon ask for 255 white (R255, G255, B255) in their spec as background colours for your product shots. This seems easy enough, put your item on a white background? But what about the colour of the light illuminating the product; is it white, pink, green or blue, maybe yellow? The truth is it could be any of these colours possibly even many of them at once. The header image to this story shows this well. I’ve ramped up the saturation to make the point. The product is lit by the studio lights’ modelling lamps (used to set the stage), these are basically household type lights and very yellow. At the point where the photo is taken these lights are dimmed very briefly and the flash tube(s) fire, typically with a much bluer light.

Colour Management in Photography

Commercial Photographer Product ShotsIn order to ensure accuracy in photography an image is photographed with a known reference which can subsequently be sampled in the photo editing software. This sampling will give a colour temperature to set the white balance and ensure colours don’t display inappropriately. It may also offer a set of known colours to set as targets for more developed colour management software. When the file is ultimately saved for use it is saved with an embedded ‘profile’ which becomes a hidden part of the image file. In the shot below the grey target is used to check the colour temperature of the studio lights and adjust the white balance to ensure colour casts are avoided. If the photo is then viewed through a monitor which has been calibrated and a system that uses profiles the viewer will see accurate colours. Most monitors rarely get calibrated so few people view images in an ideal environment.

Generally I shoot in RAW and use the ProPhoto colour-space for editing which means that a photo file will retain as much of the information as the camera could record. For most of my print work I will output files as ProPhoto if I know the bureau but failing that I will use the Adobe 1998 standard. For web work though I will go to sRGB because most non-pro monitors can’t handle the range of colours that a ProPhoto profile contains. sRGB is sometimes referred to as the lowest common denominator.

Colour Management in Browsers

Amazon ask for photos to have an sRGB profile which is fair enough. Most browsers will either read the colour profile embedded in an image or assume an sRGB colour space to be best. Even now though few browsers offer colour management to the level of Safari and those that do offer it don’t make it easy to enable the feature. As an example Firefox does not have colour management set to ‘on’ as a default. This seems likely to change though, browsers have come a long way. For now though the only browser that seems to take colour management properly at the moment is Safari though which is why Macs do a good job of making things look good.

This article is worth a read about colour-management and although a few years old this one by Native Digital is a good intro to colour management in web browsers.

Simple Monitor Calibration

Although pros will have invested four figure sums on wide gamut monitors and hundreds on calibration equipment and software most consumer PCs and Macs have built in monitor calibration tools to get the best out of them. Few people use these tools though which seems odd, until you try to use them.

In order for you to give yourself a fighting chance with viewing websites well I have to suggest that you calibrate your monitor(s). I could make things look good on an un-calibrated screen but they would only look good on that screen; we need to try and start from a level playing field.

These two links show how to access the built in tools for both Macs and PCs only PCs. Having tried both the Mac system is much easier to use than the Windows based tools. That said, I can’t profile my monitor as well using the Displays preferences as I can using Eizo’s ColorNavigator, but if I didn’t have the latter I would certainly use the built in tools.

To use the built in calibration you will need to be able (ideally) to be able to adjust the brightness and contrast on your monitor. I have recently tried to do this on my daughter’s PC with some success. To reiterate though the whilst the built in calibration tool on Macs is hugely better to my mind than the Windows offering it is still no match for a proper calibration setup.

File Formats

Finally a brief note about file formats.

I note from the Amazon specs that they accept TIFFs as well as JPEGs. Browsers other than Safari can’t display Tiffs but Amazon processes all of the images anyway. Some people note that Amazon sometimes ‘mash’ photo uploads so it’s good to try and push the best possible quality into the system.

A JPEG makes itself small by throwing away detail that is seen as not needed in order to make a small file. However this makes it a lossy format and every-time a JPEG is re-saved this will happen (it’s a bit like photocopying copies repeatedly). TIFFs can be saved as lossless files so they will only be degraded once (when Amazon processes them) so it may then be worth trying to upload TIFFs to systems like Amazon, but remember the images will start as much larger files than if you use JPEGs. Amazon do state that if you use JPEGS they should be saved as maximum quality files. JPEGS do shift colour to achieve their size which is one of the reasons why a JPEG is not the file format of choice for graphics such as logos.

Summary

It would be easy to say what’s the point trying to manage colour if people don’t calibrate and browsers can’t manage colour properly. For me it’s about being a professional photographer.

By | 2017-07-06T15:55:41+00:00 January 20th, 2016|Nikon, Photographic Equipment, Products, Technology|0 Comments

About the Author:

Andrew Butler is a professional photographer and designer based in the South West of England. He has had a long career photographing for clients as diverse as Arts Council England and Motor Cycle News.