Date: April 14th, 2009
Cate: Miscellaneous
Tags: , , , ,  

Color management in Photoshop for the web

Have you been struggling with Photoshop while exporting your image for the use inside a website or web-application? You’re probably seeing your images with less sparkly colors and having a ‘washed out’ look to them, when you used the ’save for web’ option. Well, if you didn’t, you probably wouldn’t be reading this post :-) The cause is a pretty simple one and it’s called ‘document color profile’.

This is what the Photoshop CS3 helpfiles have to say about the document color profile:
“Document profiles define the specific RGB or CMYK color space of a document. By assigning, or tagging, a document with a profile, the application provides a definition of actual color appearances in the document. For example, R=127, G=12, B=107 is just a set of numbers that different devices will display differently. But when tagged with the AdobeRGB color space, these numbers specify an actual color or wavelength of light; in this case, a specific color of purple.”

So what is happening?

While you are editing your picture within Photoshop, each pixel of that image is getting a color correction by Photoshop. This correction is defined by the color profile which is assigned to the document. Usually, this is a ‘default color profile’ which is added to the document by Photoshop itself. You can choose which color profile has to be added to each document by default in the ‘color settings’ panel (edit -> color settings).color settings panel

Now as you can see, the default value for the RGB working space is Adobe RGB(1998). But this is an inappropriate color profile for web development.  It was designed to encompass most of the colors achievable on CMYK color printers, but by using RGB primary colors on a device such as the computer display. This profile was intended for editing images for professional printing via a fully color-managed workflow which allows for a wider gamut. Not really appropriate for the web, huh?

So what the heck do I need to do then?

This where the answer enters a fuzzy area. Different people advertise different solutions. Martijn, a colleague of mine at Ottonico, simply disables color management on his documents. This can be done by opening the ‘Assign Profile’ panel (edit -> assign profile). The result is that the “working RGB” setting is not used and this other profile is applied.

This already improved colors consistency drastically, since you’re already editing your PSD without the ‘prepress colour profile’.

Still, color profiles exist with a reason and we can’t deny that most browser developers are steadily implementing the sRGB profile. It’s being endorsed by the W3C , Intel, Panton, Corel, Exif and many other players in this market and is the de-facto standard for WWW graphics. This doesn’t mean that it’s actually used a lot at the moment, but it’s the standard which is being pushed. Now most software is designed with the assumption that an 8-bit-per-channel image file placed unchanged onto an 8-bit-per-channel display will appear much as the sRGB specification dictates. One can generally assume, in the absence of embedded profiles or any other information, that any 8-bit-per-channel image file or any 8-bit-per-channel image API or device interface can be treated as being in the sRGB color space [source : wikipedia]. So for browser-graphics, but also for Flash content (which doesn’t use color workspaces), this profile would be the most appropriate color workspace.

What I recommend is to change your settings in Photoshop in a way, that you’ll always know in what color space you are working. First of all, make sure that the default profile is the sRGB profile. Second, enable Photoshop to alert you when you are opening or pasting images that have another profile attached to them. That way you’ll always be sure that you won’t be working with different color workspaces for the same project.

adjusted color settings

Some people work with the “monitor LCD profile” enabled, but since that doesn’t represent the sRGB profile and thus NOT the image that the average internet user will be seeing, this seems a wrong way of editing your images.

Futureproof

As always, it’s best to work with a focus on the future. I feel that it’s a good thing to embed this profile, since these profiles will be used more and more in the browsers to come (Safari and Firefox 3 already support it). An embedded color workspace won’t bother browsers or Flash players in displaying the image, but it does give the browser the possibility to use the image to its biggest potential. Future Flash players and webbrowsers will support color spaces more and more. Wouldn’t it be a shame to omit a color space then?

3 Comments

  1. April 14th, 2009
    REPLY))

  2. duidelijk. thx.m

    1F

  3. April 10th, 2010
    REPLY))

  4. Very nice explanation. I work with Fireworks, and often people will post on the Adobe FW forum asking why Fireworks messed up the bright colors they have in their PSD files. It’s difficult to get them to understand that they only saw bright colors in Photoshop because Photoshop was enhancing them.

    I usually point people to http://www.viget.com/inspire/save-for-web-simply. One point there is that color management for photos might be a good idea (as browsers become profile-aware), but probably not for buttons and such that need to be color-matched to CSS elements (which won’t be affected by color profiles).

    2F

    [...] that you use sRGB as color profile of your PSD file. You can read more about using sRGB on blog of Erik van Nieuwburg or [...]

    3F

Leave a Reply

 Name

 Mail

 Home

[Name and Mail is required. Mail won't be published.]