Photoshop's Save for Web ability contains a setting called Convert to sRGB. If on, it destructively changes the resulting file's colour values from the document's profile to sRGB. I believe this is the wrong thing to do in almost every conceivable scenario. The default behaviour is for Convert to sRGB to be enabled. I think this is a huge mistake.
Let's take a look at some common scenarios.
You're building a website using GIFs:
GIFs can't contain ICC profiles. This means if you're using GIFs, they can't benefit from any colour management at all. Converting to sRGB when saving for web will destructively change their appearance with no benefit. If you've used a specific colour, like #FF0010 in your GIF, it will likely be changed to not match the same colour used in HTML, CSS or other code.
You're building a website using PNGs:
PNGs can contain ICC profiles, but PNGs saved using Save For Web can not. This means if you're using PNGs and Save For Web, they can't benefit from any colour management at all. Converting to sRGB when saving for web will destructively change their appearance with no benefit. If you've used a specific colour, like #FF0010 in your PNG, it will likely be changed to not match the same colour used in HTML, CSS or other code.
You're using a PNG or JPEG image with a colour profile on the web, and it's being shown in a colour managed browser:
In this situation, you wouldn't want Convert to sRGB turned on, you'd want to store the document's ICC profile within the image and let the browser do a realtime correction, based on the viewer's computer and settings.
You're building an iOS app:
iOS uses PNG files almost exclusively for app design. I believe iOS ignores ICC profiles stored in PNGs (this is smart for many reasons, including performance). The best way to ensure colours look good on the device is previewing your UI on the device itself. There is some variation between iOS devices, but Convert to sRGB does not improve consistency. Converting to sRGB when saving iOS assets will destructively change their appearance with no benefit.
You're building an Android app:
Android uses PNG files almost exclusively for app design. I believe Android ignores ICC profiles stored in PNGs (this is smart for many reasons, including performance). The best way to ensure colours look good on the device is previewing your UI on the device itself. There is wild variation between Android devices, but Convert to sRGB does not improve consistency. Converting to sRGB when saving iOS assets will destructively change their appearance with no benefit.
I can not think of any scenario where Convert to sRGB makes sense. If, in the highly unlikely event you do need to convert a document to sRGB, it can be done using Edit → Convert to Profile.
Why was Convert to sRGB added in the first place?
Colour management and UI design — My article. Explains the situation with more depth.
A search for "save for web color shift" returns over 8 million results. This is a real and significant issue for many people. An issue that can be fixed by changing a single default setting.
Save For Web, Simply — Note that the settings recommended match what I'm suggesting.
This is a big deal.
This has been demonstrably incorrect for a very long time. I don't know any web or app designer worth their salt who keeps Convert to RGB on. In fact, I'd go as far as saying that if it was permanently turned on, I wouldn't be using Photoshop for any screen design work.
By changing the default behaviour, I think Adobe could remove a lot of frustration for Photoshop and Illustrator users.
Help get this topic noticed by sharing it on Twitter, Facebook, or email.
EMPLOYEE2Convert to sRGB was added at the insistence of many web developers who were converting manually all the time before running SaveForWeb. Converting to sRGB (or working only in sRGB) is still the most recommended practice for web images.
sRGB is what the average user on the web will see, so converting other colorspaces to sRGB is a good idea if your image is going to be displayed on the web. Some browsers assume that all images are in sRGB if they are not tagged with an ICC profile.
sRGB is also closer to the colorspace of phones and tablets than most other standard colorspaces.
If the file contains an ICC profile, then converting to sRGB is pretty much harmless.
If the file does not contain an ICC profile, then converting to sRGB is a necessity.
If the browser does not understand ICC profiles, then converting to sRGB is a really good idea.
If you save a file for the web in AdobeRGB or ProPhotoRGB, most users are going to wonder why the color is messed up. If you save it in sRGB, it will look correct for the majority of users.
Yes, "web color shift" usually means that someone does not understand color management, how their browsers displays color, or how Photoshop compensates for the display. But it has nothing to do with convert to sRGB in SaveForWeb. As long as different browsers have different rules for how they convert and display colors, "web color shift" will still be with us.
In short: you're wrong on almost every point here.
All you can claim is that converting to sRGB will change the color values, which might matter if you hand coded other values on the web page. But converting to sRGB will preserve the appearance far more often than not converting.
Here's the top 5 hits from Google.
Note that all are complaining about Photoshop not matching their browser. They're not complaining that images look different from computer to computer. The fix is easy: disable RGB colour management by setting the working space to the monitor RGB, use a profile of Don't Color Manage This Document and turn off Convert to sRGB.
Everyone wants the same thing — for Photoshop to behave like their browser.
When we saved out the slices, the awesome Odeo pink flattened to a dreary "light coral". I'd seen the problem before, but never so pronounced: The color, through no fault of its own, was obviously changing, and we were at a loss for a way to prevent this.
Thankfully, it's an easy fix: Open up any image on your machine and File / Save For Web. Next to the Preset option, there's a sneaky little arrow...click it and uncheck "Convert to sRGB."
I’ve had a lot of problems lately with Save for Web producing colors that are slightly different than my source PSD. After finally losing my mind I set out to find a solution.
Now when clicking Save for Web, uncheck Convert to sRGB.
For me, these changes did the trick, now my gifs and jpgs are as close to the original as my compression settings will allow.
Have you ever spent a lot of time getting the color in your image perfect only to have it go flat and dull when it was exported to the Web and viewed in a browser?
Uncheck Embed Color Profile and Convert to sRGB.
I'm seeing a color shift when I use Photoshop's "save for web" command. Here's a sample, with the right half of each color square indicative of what happens:
Do your images shift colors once you save for the Web and view in a browser?
The problem most people have is that the wrong question is being asked. Once the correct goal is set — for colours in Photoshop, images and the browser to match — the solution is easy.
EMPLOYEE1>> The fix is easy: disable RGB colour management by setting the working space to the monitor RGB,
That's the "hide your head in the sand" approach.
It makes things seem right for the moment, but you've really screwed up because now you assume that everyone has your exact display. And it still won't match all browsers!
And I've seen way too many web answers and tutorials telling you to convert TO sRGB (because it'll give much more consistent results than ignoring color management entirely).
Sure, they want Photoshop to behave like their browser: which browser, which version, on which OS? They vary all over the place (almost as much as font rendering). Some of them recognize ICC profiles, some don't. Some assume sRGB for untagged files, and some assume the display profile (blit without conversion). Some convert images differently from page elements, and some get it right. Some even handle different image formats with different rules. Oh, and vector graphics -- all over the map. And, oh, boy, there's a new can of worms coming in HTML5!
Some people have a simplified understanding of how color works in applications and browsers, and want to turn it all off to make things simpler -- unfortunately they also make it wrong. Kind of how automotive engineering is much simpler if you take out the brakes, shocks, CV joints, power steering, transmission, that messy engine, and all the other moving parts. But the whole point of automotive engineering is to know how those parts work, and how they work together -- not to simplify things to the point where it all stops working. If you know how they all work, you can make improvements, and keep things moving at the same time.
I'd really like color management to be easy - but until browser authors understand the problem and fix their bugs, it's not going to be (and I am working on it, but it's a slow process). And even then, you will still have to understand that every display is different, you can't count on numbers unless they're referenced to a colorspace, and you need to either include profiles or convert everything to the average/standard colorspace.
Note: If displays had more variation between them, people might catch on quicker - because they wouldn't see false consistency of sRGB like displays.
I have never understood the purpose of this setting with PNGs and GIFs either. It's now the first thing I check when I have color issues, but the fact my output didn't match what I was seeing or the color values I was getting with the eyedropper never made sense to me.
I've been using photoshop since version 1. For print, then web and more recently UI design for apps. Since they first became previlant colour profiles have done my head in. The only place I have found them consistent and meaningful is in print design and using colour profiles that match the printers machines and processes. On the web and in UI app design I have consistently found that using profiles or converting to sRGB for GIF and PNG files does little but sap colour and consistency from my graphics. And yes I have viewed them on many different browsers, systems and devices. And there is some colour shift there is no doubt, but this shift is far more tolerable to me than the bizzar results I have had from either working in or converting to sRGB. That is real world experience over many years.
Marc and I got into a heated debate about this on Twitter. :-) Let me see if I can break down my argument for this thread.
Working spaces like sRGB and Adobe RGB are designed to target a certain color application. They all work within the CIE 1931 master color space, which I'm sure you've seen before:
The CIE (2D) chart is meant to describe the full perceptual color limits of the human eye, as measured by saturation. As you can see, the green section is larger because our eyes are more sensitive to green than to any other color. The triangle shape within this horseshoe represents the approximate range of colors that the profile – in this case, sRGB – is designed to support.
But this is all a bit abstract. Let's look at my display's gamut, as measured by a colorimeter, and compare it to sRGB via a hastily-done blending mode selection.
This monitor displays more saturated green at #00ff00 than an sRGB monitor does at #00ff00. Same deal goes for red and blue. As you can see, I've deliberately chosen a display which can reproduce the entirety of the sRGB gamut. This is important, otherwise I would have clipping in very saturated colors. My display manufacturer, Dell, has chosen an LCD and backlight which targets Adobe RGB, another working space:
So why, you might ask, would I use sRGB as my working space, when it desaturates my color output in Photoshop and changes the preview in Save for Web? It's because most display manufacturers do the same thing that Dell did with my monitor – they target a known standard – only they target sRGB instead of Adobe RGB.
The whole idea behind this color management thing is that if you're using sRGB as your working space, and you have a run-of-the-mill monitor (hooked up to a different machine with no calibration at all) next to it displaying what you save out using Save for Web, when you compare the colors next to each other, they're supposed to look very similar. They aren't going to look *identical* because sRGB monitors have the same kind of color variations as my Dell monitor does to Adobe RGB, but it should be a lot closer to what other people are going to see than if you're using your own device's color profile to do your design work.
I can be reasonably confident that my pale periwinkle color is going to look quite similar on someone else's display to what I'm seeing in Photoshop, because everyone has standardized on sRGB. And for the minority of people who are on higher-end monitors like mine, I use my monitor's profile as a proof setup to mirror the "no color translation" color setup that Marc uses, to check that my more saturated colors aren't going to burn anyone's retinae out like the red background does on netflix.com. Best of both worlds!
Since my display has been professionally calibrated, I can also use a proof setup for other things. I measured the color output of my iPhone using my colorimeter and can use that as a proof setup if I want.
The color temperature of my display is different from my iPhone, which the camera accentuates, but it looks much closer in person.
BUT! All this said, the problem still remains though: colors shift and people don't understand why. Color management is incredibly hard, and it took me a couple of years to figure this stuff out for myself.
The W3C endorses sRGB as the correct color profile for images and raw hex values on the Internet. As such, the default setting for the "Convert to sRGB" checkbox in Save for Web is correct.
If you don't want any color translation at all, instead of turning off color management completely, go to Window > Proof Setup > Monitor RGB. This will have exactly the same effect as Marc's workflow, and cancels out the default sRGB behavior since there is no translation.
Let's start with some facts:
1. Most developers and designers use Photoshop's Save for Web for web and app PNG and GIF images.
2. Photoshop's Save for Web can not save PNG and GIF images with a colour profile attached.
3. Most web interface images are PNGs and GIFs that do not contain a colour profile.
4. Practically all iOS and Mac app interface images are PNGs that do not contain a colour profile.
That is the reality.
** All the browsers I've tested display PNGs and GIFs according to the raw values contained within the files, with the exception of Safari 6 (just released a couple of days ago, more details below). **
–––––––––– Browser tests ––––––––––
Here's the browsers tested, using a PNG, PNG with gamma chunk of 2.2, GIF and CSS:
iOS 5.1.1 Safari
iOS 5.1.1 Safari - iPhone Simulator
OS X 10.7.4 Safari Version 5.1.7 (7534.57.2)
OS X 10.8 Chrome 20.0.1132.57
OS X 10.8 Firefox 7.0.1
OS X 10.8 Firefox 12.0
OS X 10.8 Firefox 14.0.1
OS X 10.8 Safari 6.0 (8536.22)
Ubuntu 10.10 Firefox 3
Windows XP-x64 Chrome 20
Windows XP-x64 Firefox 14
Windows XP-x64 IE 8
Windows XP-x64 Opera 11
Windows XP-x64 Safari 5
I also tested the same PNG in an iPhone app
iOS 5.1.1 app - iPhone Simulator
I don't have a grab of the iPhone app running on the device right now, but trust me when I say it's the same — I compare screen grabs from the device with my PSDs all day, every day and they always match perfectly.
Here's a composite of the important parts (all identical except Safari 6, which is at the bottom):
Here's the test web page, containing the colours as CSS, a PNG and a GIF image:
And all the original screenshots:
Except for Safari 6 (info below), every single browser rendered everything exactly according to the HEX values typed into the PSD initially. PNG, GIF, CSS across many browsers and versions are identical.
Safari 6's CSS did match the other browsers, but the PNG and GIF images did not.
I don't know his current opinion, but in 2006 Dave Hyatt thought it was a bad idea to treat images with no profiles as sRGB:
First of all, if you correct unprofiled images to sRGB, you have to correct all drawing to sRGB. This includes everything drawn by CSS (borders, backgrounds, text). This is not difficult to do under the hood, although it is difficult to do it with no performance regression in our benchmarks at all. In fact we even tried this during the Tiger development cycle (just correcting everything drawn to sRGB), but it slowed us down.
The big hurdle that we ran into, though, was with the drawing we did not control, namely the Flash plug-in. The problem is that designers specify colors in Flash and colors in CSS in the Web page, and they expect those colors to match. Because Flash’s drawing isn’t correcting to sRGB, if we did it in Safari, there would be color mismatches all over the place. These mismatches look far worse than if we just don’t correct at all.
If the Safari/WebKit team have chosen to assume images with no profile are sRGB in Safari 6, then I think that was a big mistake, and I bet the web community will be upset that CSS and images no longer match.
Apart from the brand spanking new Safari 6, I have never, ever seen a modern browser behave differently. If you believe this is the case, please provide evidence.
–––––––––– No RGB management vs sRGB all the way ––––––––––
There's two setups that are being advocated in this discussion.
Working Space / Proof: Monitor RGB / Off.
Document profile: Don't Color Manage This Document.
Convert to sRGB: Off.
Chris and Ricky recommend:
Working Space / Proof: sRGB.
Document profile: sRGB.
Convert to sRGB: On.
Here's how colour values are tracked throughout those workflows. Please note (again!) that we're talking about PNGs and GIFs saved using Save for Web, so they *can not* have profiles.
The numbers in the red box will change depending on your monitor profile.
If your document is tagged sRGB and you're exporting with Convert to sRGB turned on, your values are being exported unchanged (converting from sRGB to sRGB will not change the values, unless there's a rounding error in the conversion).
Colour management is all or nothing. You can't make some blind conversion when you're saving an image that doesn't contain a profile. And remember, for user interface design colours in images MUST match colours in code. That's essential.
–––––––––– The important conclusion ––––––––––
In Chris's recommended setup, Convert to sRGB does nothing. In almost any other setup, it will damage every exported file.
Please remind me again why the option is turned on by default?
EMPLOYEE1If you are working on an sRGB display, you may not see the changes being applied by various browsers.
But my displays are mostly AdobeRGB - so I see more significant differences.
New displays coming in the near future will make the difference even worse (larger gamuts, not necessarily RGB primaries, etc.), and require color management at all times to work well.
Safari, Firefox, Chrome.
Safari, Firefox, Chrome.
Thanks everyone for a great discussion here. Very informative. One question: Chris, you said that:
"New displays coming in the near future will make the difference even worse (larger gamuts, not necessarily RGB primaries, etc.), and require color management at all times to work well."
Can you point to any more info on that? What displays?