Until recently having both of those terms in a single headline would have made me (and most of my fellow web design colleagues) cringe…
In a nutshell the aim of color management is to keep colors consistent across an array of displays. This is a good thing in theory but unless you pay close attention to your color settings when generating web graphics, the browsers can take over and assign their own values. This might not seem overly important at first, but when an official corporate blue suddenly shifts to a purple hue, chances are you’re going to hear complaints.
Keep in mind, the technique I’m sharing here works for IE, Chrome, Firefox and Safari (which all support color management), and I can’t guarantee results with less common browsers. Also, this technique is only 99% accurate, and for some unknown reasons, some colors still shift by tiny amounts. Luckily the shifts are subtle enough that the human eye can’t really see a difference (even with big blocks of fill).
The solution to this color management situation, is to use a standard and widely adopted color space. In this case, sRGB which was created to solve color matching issues. The “s” stands for “standard”, and in addition to computer displays, is now used for HDTVs and more recently mobile devices. It’s been adopted by the W3C and all major browsers support it. For more information on sRGB you can check out this excellent Wikipedia entry.
Part 1 – Setting Your Photoshop Color Mode
The first step is to make sure your overarching color settings are setup for sRGB and are NOT using some monitor specific or legacy profile. This blog post assumes that you are on a current version of Photoshop, though I imagine there are similar settings in other design programs so if you’re not using Photoshop this logic should still apply. To modify settings go to Edit -> Color Settings.
This is the color space that Photoshop itself will use for display. You want to make sure you choose sRGB since that’s what your end browsers support.
Color Management Policies
Switching this to “Off” will do two primary things. It turns off color management for newly created documents and also ignores color profiles embedded in existing documents (unless they already use sRGB in which case they are preserved). So this leaves us with both new and existing documents using our preferred sRGB color space.
Part 2 – Save for Web & Devices Settings
One of the great features in Photoshop is it’s Save for Web exporting feature. Beyond a really great compression it provides us with nice previewing tools and specific settings for outputting web-optimized images. Below are the 3 settings you need to pay attention to, to keep our colors accurate in the browsers. These settings apply to JPG, GIF and PNG (both 24bit and 8bit) file formats.
Embed Color Profile
Should be unchecked. This only adds file size and its irrelevant since we’re targeting sRGB anyway.
Convert to sRGB
This is probably the most important setting in the dialog box. Since we were already working in an sRGB color space it’s not truly converting anything but we need to leave this checked to make sure the exported file has sRGB enabled.
Should be set to Internet Standard RGB (No Color Management).
And that’s all there is to it. This is our version of color management best practices for web design, but if you have other techniques or examples, we’d love to see them. Please share in the comments below!
Topics: Demand Generation