If you – like me – are having problems reproducing identical colours between Photoshop and your web browser this post provides a solution.
This post does not concern itself with best practices for printing techniques and managing CMYK colour palettes. I’m primarily a web designer, so settings for print don’t concern me. That said, if you are a print designer you’d still benefit from reading this article, especially if you haven’t come across the term sRGB before.
I’ve tested on a PC running Windows 7 and Adobe CS4, using Photoshop. I can’t guarentee these guidelines will work on other platforms and/or Adobe applications. If you’ve used the following method on another platform and had success with it please drop a comment in below – thanks!
The my colour reproduction problem
This evening a realisation occurred. Something I haven’t deemed that important in a while (not since dealing with traditional CMYK print work) came back to bite me: I learned to manage my colours in Adobe Photoshop.
Firstly I will set the scene…
Generally – up until now – I tend to use the default Photoshop settings. If the end output looks imperfect I will play around inside the colour settings until I’ve rectified the situation (yep, I’m a total professional). This was until yesterday when the aforementioned strategy, disappointingly for me… failed.
The straw that broke the camels back today, for me, was spending £80.00 on stock photography only to find my beautiful grass trounced to a vivid, high contrast, almost luminous green amongst the plethora of browsers installed on my machine.
You will find numerous online articles complaining of the opposite effect – colours being ‘drained of their vibrancy’ etc. but seen as I’m *special* I discovered the same problem ‘arse to front’. You will also shortly discover that this colour management discrepancy is hardware, platform, and browser-independent. No Adobe or Microsoft bashing here please – it’s your responsibility to configure your own settings.
It’s your responsibility to configure your own settings.
Weirdly, everything I could view the exported image in outside of a browser appeared as intended, including Windows Photo Viewer and similar applications on my Mac:
The correct image file type for the job
Firstly it’s worth noting the types of image files you should be using when publishing to the web (accounting for file size, image quality, and device support):
- .gif – best option for graphics using flat colour without gradients.
- .png – best option for graphics using flat colour with gradients.
- .jpg – best option for a plethora of mixed colours and gradients, such as photographs.
Obviously there are exceptions to these simple rules, but I find them appropriate 9 times out of 10.
sRGB fo’ sheezy mah neezy
Notice I mentioned ‘device support’ above – strange in this context I know. When I first started reading about sRGB and saw the words ‘support’ and ‘device’ I slouched in my chair.
As a front-end developer I’ve spent approximately half my professional career catering for software and hardware compatibility issues in an attempt to offer the end-user an ‘optimal experience’ irrespective of their individual set-up. My current CSS-quirks list is long enough without having to tag ‘cross-browser colour testing’ on the end. Thankfully my initial, slouched (but cosy), reaction was unfounded.
Photoshop uses two main RGB colour spaces (or ICC colour profiles):
- aRGB (Adobe RGB(1998), and;
The transformation of the scattered measurement data into a more regular form, usable by the application, is called profiling. Profiling is a complex process involving mathematics, intense computation, judgement, testing, and iteration. After the profiling is finished, an idealized color description of the device is created. This description is called a profile.
sRGB has the narrower gamut of colours, effectively making it a subset of aRGB. The mighty Ken Rockwell will contest this explanation, however it makes sense to me so I’ll run with it.
Some older devices, including your average consumer hardware monitor, may be unlikely to support the wider gamut of colours which make up aRGB, making it a sensible approach to adopt the widely supported sRGB gamut for all web imagery – something Ken Rockwell and I do agree on. Some people have coined the term ‘s(safe)RGA’ for this very reason.
We are able to control these colour profile settings in Photoshop via ‘Edit > Colour Settings…‘. If you’re saving images to the web these are the correct settings you’ll want to adopt as part of your (new) work flow. Unless you’re a colour expert, I would expect it’s unlikely you will need to drill down and manually configure settings; making do with one of the Photoshop pre-sets (‘Settings‘) instead:
- General purpose 2
- Prepress 2
- Monitor colour
If you’re exporting imagery for the web ‘General purpose 2‘ is the setting you will need, although I have read alternative opinions on why completely disregarding sRGB, gutting all colour profiles, can yield amicable results.
If you’re exporting imagery for the web ‘General purpose 2′ is the setting you will need.
If you’re thinking of using this alternative approach, then I strongly recommend you read this thread on the Adobe forum. The gist of the discussion is that not assigning a colour profile may well give you identical images on your set-up, but it will likely result in inconsistencies for other users with different set-ups (monitors, software browsers etc.).
I haven’t yet had time to find specifics on how each and every browser handles colour profiles. If you know of such resources on the web please let me know about it!
You will need to restart Photoshop for any new settings to take affect.
The perfect colour work flow for web
The following work flow information relates to exporting image files via the ‘Save for Web & Devices’ command in Photoshop (CS4). If you’re using the ‘Save as…’ command to export images for a web browser you’re a buffoon.
By this point I hope I’ve communicated the importance of working with a defined colour profile. Assigning a colour profile and managing this on a file-by-file basis is being responsible, and means you stay in control.
To make sure you always know what’s happening deactivate all ‘Colour Management Policies’ and check ‘Ask When Opening’ and ‘Ask When Pasting’ for when missing and mismatched profiles occur. In which case you should either choose to keep the profile or to convert it to your working space (depends on what you want to do).
This means we now receive notifications when anything differs from sRGB, our working profile of choice:
Going back to my original example: now being notified that the grass photo I’m importing has an embedded colour profile of aRGB I can choose to ‘Convert document’s colours to the working space’ (being sRGB) and begin editing colours. When I come to export the image file for browsers I will know from the very beginning I’ve been working with the same sRGB colour profile and my image will be identical for the end-user on their chosen device.
There’s no need to mention image file types [here]. It’s a separate issue which doesn’t – and shouldn’t – concern itself with colour reproduction. After all .gif, .png, and .jpg all support sRGB.
There’s no substitute for testing the end result as often as possible during your design phase. If it’s a crucial colour to get right, like this grass colour was for me in my example, then it’s worth knowing if you’ve gone wrong early on.
The ‘Proof Setup’ and ‘Proof Colours’ settings allow you see the fruits of your chosen colour profile then and there inside Photoshop; in theory without having to export and test your image files:
You will potentially need to update these setting every time Photoshop opens, and additionally every time you begin working with a new image, so stay frosty with this. Annoying I know, but I haven’t yet found a default setting option in Photoshop. If you know of one please enlighten me.
I have chosen the setting ‘Proof Setup > Monitor RGB‘ because I know my monitor is using the same colour profile standard – not rocket science. Now you understand why owning a good quality monitor helps if you rely on faithful colours.
Ahhhhhh, gotta ❤ (love) standards.