: What should I do regarding color profile when designing for the web? I have read this article by Doug Avery where he explains how to disable Color Management in Adobe Photoshop and the follow-up

@Lengel450

Update for Adobe Photoshop CC (2017):


Leave your working space to the default (North American General
Purpose 2)
Don't change anything else

Vote Up Vote Down

@Sent7350415

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.

Vote Up Vote Down

@Merenda852

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).

Vote Up Vote Down

@Samaraweera207

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.


The image must be created using the correct workflow.
The image must be saved with the correct ICC colour profile.
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.

Vote Up Vote Down

@Phylliss782

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.

Vote Up Vote Down