Making great websites is all about consistency of experience for the majority. Graceful degradation is an important process that should influence all stages of a project.
One little-understood variable with design and online image publishing is colour profiling. Every screen uses a colour profile so it is an important aspect to understand. I have read many confused discussions online this week about images being filtered and ‘washed out’ by Photoshop’s ‘Save For Web’ function. This is not voodoo nor a bug.. In this post I will try to clean a path to the holy grail: Mastering your colour profiles. Designers and image-cutter-outers take note!
1) Before discussing Photoshop, we need to set our computer’s colour profile correctly. This is to achieve a profile which is on average with the majority of computer users – a standard. In System Prefs/Displays/Color, calibrate a new profile, setting the gamma to 2.2 (macs default at 1.8) and the white point to D65.
2) Now open Photoshop, and a new document. In the dialogue box, click Advanced and change the colour profile to “sRGB IEC61966-2.1″. This is the most common colour profile used by PC displays (and unfortunately lacks colour information compared to others such as Apple’s or Adobe’s RGB.)
3) Design!
4) When happy, cut out and File / ‘Save For Web & Devices’ – I’m presuming we’re saving out as a JPG. It shouldn’t make a difference if ‘Convert to sRGB’ is checked (as your document is already), but I usually just leave it ticked. ‘Embed Color Profile’ is used for colour managed applications, which although is not common currently, it is being added to more modern browsers (as an option in Firefox 3 and used in Safari 4). There are good reasons not to use it though, as currently no browsers embed ICC profiles into code. Any coloured html borders will not match ‘identical’ coloured images. It also adds a few kilobytes to each file, which on image-driven sites may choke dial-up users, and add up to extra hosting costs on popular sites.
- If you are sending your PSDs to someone else to cut-out/tweak, make sure your document colour profile is embedded (in save as box) and a smiley email asking that they do not override your sRGB setting (possibly with a link to this post). In my experience the majority are blissfully ignorant to this knowledge and use the default, usually Adobe RGB.
Lots of cool extra reading and demos at: http://www.gballard.net/psd/cmstheory.html
There’s a couple other good posts on this save-for-web color-shift subject:
http://www.viget.com/inspire/the-mysterious-save-for-web-color-shift/
http://tancredi.co.uk/2007/5/13/photoshop-cs3-and-save-for-web-issues
Note the 2nd link is currently throwing a php parse error for me, but the link is valid – it came from my bookmarks. That whole domain is throwing the parse error so I would imagine they’re aware they have a problem and it’ll get fixed soon.
cancel bubble 06 Apr / 9:31 pm
Thanks for posting those up – Viget was a very interesting read (and yes, I read every reply!)
It is a shame that they don’t have pagination on the post-replies, as this has diluted the message with way too much subjectivity and confusion.
I’m looking forward to an update on their site which consolidates the new information from the responses..
Tim 07 Apr / 8:39 am
Thanks for this information, however colours are still off when I save for web – it’s an issue that’s been bugging me for a lifetime. Still trying to get my head around it. Is there something i’m missing that isn’t in this post?
Webdude75 09 Jun / 12:46 am