What should I do regarding color profile when designing for the web?

Question

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?

Answer 1

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.

Answer 2

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.