Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

I have read this article by Doug Avery where he explains how to disable Color Management in Adobe Photoshop and the follow-up article in response to the uproar of the commenters arguing against it and supporting sRGB, although I am still not convinced on what technique I should apply in my personal workflow.
From what I've gathered while reading the article (please correct me if I'm wrong), the correct way to deal with this would be to have Photoshop manage the colors as sRGB and making use of Proof Colors when in need for a more "faithful" preview of the your work.

At the moment I have an entire website project that has been designed with color profiles disabled. I started on it that way because months ago I had noticed that the colors Photoshop rendered, although reported correctly by Photoshop's own Eyedropper Tool, did not correspond when measured from a screenshot to what I was seeing in Google Chrome when opening the image exported as a PNG.
After a quick search I came across the post I cited earlier and applied its suggestions blindly (without even noticing the follow-up nor reading about the problems with it). Since then, I've had no problems: I take screenshots of my work in Photoshop and I upload them for the developer to make use of. He gets to see the same colors I see and use when developing the design, and I don't have to jump through hoops to see what I'm actually doing.

My questions:

  • Is it really necessary to use sRGB in a web design (I understand the implications of not using it in something like photography or print) when it only adds more work by forcing you to use Proof Colors? (That's just how I see it, please correct me if I'm wrong)

  • Since saving with an ICC Profile will lead to some browsers correctly applying the profile while others ignore it, the article also says that it's probably the best idea to just design with sRGB and then save without the ICC Profile. Doesn't that defeat the purpose of using the color profile in the first place? Or am I misinterpreting what the article says?

share|improve this question
1  
I don't think Marc Edwards's answer is right. If you set your color profile to "monitor," your color is going to look great to one person only: you! sRGB allows a wider range of people to view more consistently. Read this link. It offers the best information I've found yet on the matter. gballard.net/psd/saveforwebshift.html –  user10177 Feb 19 '13 at 22:38
add comment

4 Answers

My (sometimes controversial) opinion: People who recommend using sRGB for user interface and web design are crazy. Here's why.

For colour management to work for screen design, there's three important things that must happen.

  1. The image must be created using the correct workflow.
  2. The image must be saved with the correct ICC colour profile.
  3. The image must be displayed correctly, adhering to the image's profile and the environment it's being displayed in (the browser and OS etc).

If you don't have all three, colour management does not work at all. Having one or two of those things means the entire chain is broken.

And here's the rub: All PNGs and GIFs saved from Photoshop can not have ICC profiles, so number 2 is not possible in most cases (JPEGs can have profiles though). And a lot of browsers don't behave correctly, so number 3 is also out in a lot of cases.

If you're displaying a photo on the web, your best option is to destructively convert to sRGB and embed an sRGB ICC profile and only use JPEGs. If you're building web user interface elements, then your best option is to set up Photoshop to target "device RGB" (native colours with no profile or colour management).

Doug Avery's advice is good. The important portion of his post is the grid he uses for comparing all the results. What he's after is matching HTML, CSS and colours in images, which is the right thing to aim for. That's only possible if the colour values in images and colour values used in HTML/CSS are treated the same way.

I've written a lot more on the topic here:

Colour management and UI design

And argued ad nausium with an Adobe engineer here:

Save For Web, Convert to sRGB should be off by default for PNGs and GIFs

Is it really necessary to use sRGB in a web design (I understand the implications of not using it in something like photography or print) when it only adds more work by forcing you to use Proof Colors? (That's just how I see it, please correct me if I'm wrong)

No, it's not necessary. In fact, to assume sRGB is helping demonstrates a lack of understanding of the topic. There are situations where you should definitely use sRGB, but it belongs as part of a complete photo workflow: You need to use JPEG images, use sRGB and embed an sRGB profile. You can't do part of that without doing all and expect any benefit from colour management.

If you're saving GIFs or PNGs from Photoshop, then you're never going to have an ICC profile in your images, so you need to make sure your workflow is set up for that and how browsers will treat the images.

Since saving with an ICC Profile will lead to some browsers correctly applying the profile while others ignore it, the article also says that it's probably the best idea to just design with sRGB and then save without the ICC Profile. Doesn't that defeat the purpose of using the color profile in the first place? Or am I misinterpreting what the article says?

Keep in mind that:

  • GIFs can't have ICC profiles.
  • PNGs saved by Photoshop can't have ICC profiles.
  • PNGs can have profiles, but it's rare that they're saved with them.
  • JPEGs can have profiles.
  • Browser rendering of images with profiles differs between browsers.
  • Colours in HTML and CSS are often assumed to be device RGB or sRGB, and you have no control over that.
share|improve this answer
3  
I have 6 computers at home and two calibrated monitors at work. One calibrated monitor just doesn't have a decent gamut so even with calibration, it is not trustworthy. All six at home are stock off the shelf and they all display colors differently. This is a lesson in real world usage. This is How I Learned to Stop Worrying and Love it. –  horatio Aug 31 '12 at 13:59
2  
Yeah. The goal is consistency within the page for UI elements, rather than consistency across different displays (which is impossible under most circumstances). –  Marc Edwards Aug 31 '12 at 14:08
add comment

Profiles definitely are needed if developing/designing on Mac.

If I work on my images in Photoshop as Adobe RGB, or ProPhoto RGB, (the 2 profiles a good camera uses), then the colors shift A LOT when the PSD is saved for web and viewed on a Windows PC.

For a Mac user, using sRGB profile in WORKING files is needed to maintain colors across platforms.

The final published file (save for web) has no profile, but using sRGB during it's creation is needed on Mac -- at least is is on ours if you want the colors to look similar on Mac and Windows.

share|improve this answer
add comment

I'd like to confirm the statements of these paragraphs:

From what I've gathered while reading the article (please correct me if I'm wrong), the correct way to deal with this would be to have Photoshop manage the colors as sRGB and making use of Proof Colors when in need for a more "faithful" preview of the your work.

and

Since saving with an ICC Profile will lead to some browsers correctly applying the profile while others ignore it, the article also says that it's probably the best idea to just design with sRGB and then save without the ICC Profile. Doesn't that defeat the purpose of using the color profile in the first place? Or am I misinterpreting what the article says?

I distinguish between the production environment (known and self controlled) and the output device, and I arrange the workflow according to what's best for photos. Let me explain:

When I open photos from my digital camera I have the option to open them with the contained sRGB profile. If I open them without the profile I'd loose important information (colors look differently). So I also keep the profile for further processing. With the contained profile Photoshop can adapt the colors to my monitor profile, to the profiles I access for proof colors, to my printer profile and to all the profiles my colleague is working with.

If you use photos in your design files, then you should create the blank canvas with an attached profile. And if you hand over the design file and not the final graphics to a developer it's good to still have the profile attached...

I save the final files without profile and they look as expected. Why is that so? I think because graphics without profile get interpreted as if they had an sRGB profile attached to them (maybe someone knows a reference for this).

And I would also guess that when you take a screenshot your system converts the colors from your monitor profile to sRGB (or you have a very good monitor close to sRGB color space).

share|improve this answer
add comment

The answer to your first question: If you don't use sRGB in the workflow, all used images from other colorspaces will eventually not have accurate or even cropped colors on the web. Most images without profile you import or use will do fine because they are already in the right colorspace (e.g. the standard space in camera's).

2nd question, yes the purpose is defeated because the use of color profiles is not yet implemented on the web in such a way you can use them. Browsers 'expect' sRGB, so there's no need to attach them, this just increases filesize. Because a lot of browsers don't understand profiles, it's not a good idea to offer images with profile in, say Adobe rgb 1998, because colors will be cropped.

share|improve this answer
    
"Browsers 'expect' sRGB" — sort of. There's mixed behaviour across browsers. Most render untagged images as device RGB (no conversion). Safari 6 on OS X assumes (wrongly) that untagged images are sRGB and converts. –  Marc Edwards Aug 31 '12 at 11:00
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.