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

[marcbjango]

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?

---

Further reading.
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.

[FeedbackCommunityMember]

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

[marcbjango]

sRGB is what the average user on the web will see

Why? If you're using a Mac and no colour management (remember that PNGs and GIFs can't be colour managed when using Save for Web), then the most accurate way to preview your work is without colour management — doing so means Photoshop matches Safari, Chrome, Firefox et al perfectly. Not kind-of-sort-of, but absolutely perfectly, so colour values are identical.

The same is true for PCs. Macs and PCs have the same gamma now, so while the differences between systems can be big, the gap has narrowed.

Converting to sRGB doesn't help with consistency across computers anyway, it just breaks consistency within the same page, which is far more noticeable.

sRGB is also closer to the colorspace of phones and tablets than most other standard colorspaces.

I don't agree with that statement. Also, it's very easy to preview on the device, which will give you an absolutely perfect preview of how the final app will appear. Again, this isn't a kind-of-sort-of, it's value matched perfectly.

I design in Photoshop with a realtime preview of the exact appearance on the device. There's no guessing. (Yes, this is for iOS, where colours are mostly consistent across devices.)

If the file contains an ICC profile, then converting to sRGB is pretty much harmless.

What about rounding errors introduced from the conversion? What about change in gamut? I wouldn't consider those to be harmless. They're needless damage, that could introduce banding and other artefacts.

If the file does not contain an ICC profile, then converting to sRGB is a necessity.

This is simply not true. What if I choose a colour, use it in my document and I want to match the colour in code? It's common for some UI parts to be images and others to be drawn in code (text etc). I want those to match.

If the browser does not understand ICC profiles, then converting to sRGB is a really good idea.

Please see above. Also, I think consistency within the page is far more important than consistency for some parts of the page (just the images with ICC profiles) across different computers.

I think your reply shows a disconnect with the way images are actually used on the web and in app design. Ultimately, this is a destructive adjustment that's applied to every image that passes through Save for Web.

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.

Might matter if you hand coded other values? Might matter? Of course there's other hand coded values. Of course they have to match the images used. I'm shocked you have such a careless attitude towards matching colours within the page.

---

It's important to recognise that UI design requires a different colour management approach to photography and print design. For this topic, I'm only talking about UI design.

Please give me an actual scenario where you'd want to use Convert to sRGB in Save for Web. Keep in mind that if you set the document's profile to sRGB, then Convert to sRGB would actually not do anything.

How does converting to sRGB help with consistency across devices, where the display's characteristics are going to apply anyway?

[FeedbackCommunityMember]

You're confusing multiple issues.

To make an image that looks about right on the majority of computers - it needs to be in sRGB colorspace. You can do that by starting the document in sRGB, or by converting.

Yes, if you use other colors on the webpage, the numbers need to be referenced to the colorspace of the images (but still won't match exactly on all browsers due to various bugs). Yes, the color numbers almost certainly need to be defined in sRGB.

Turning off color management just misleads you by making everything look kinda right on your own display, and very wrong on everyone else's display.
That's where sRGB comes in - it's an average of common displays, and can provide you a better idea of what other people are going to see, and is what several browsers assume for color handling.

If you know the colorspace of a specific device you are targeting, that's fine - you can work in that colorspace and ignore the sRGB conversions.

I don't have a careless attitude about matching colors - because I know how all the browsers work, and what displays are in use. I know that I need to convert to sRGB to make things look right to most users. And I know that my monitors are not sRGB, so I need color management to provide me with a preview of sRGB. When I design for websites, I start with sRGB and don't need to convert. When I prepare my photos for print they're usually in ProPhoto or Adobe RGB colorspace, I'll save off a copy for the web, and convert to sRGB. When I prepare screenshots of application UI, I need to convert for the display colorspace to sRGB so other people won't see whacked out colors.

Again, this was a very frequent request of web designers -- because until it was added to SaveForWeb, they had to remember to manually convert before running SFW. Now there's a convenient checkbox that saves them a step and some time.

But you're claiming things that don't match actual browsers or actual end user displays. You seem to just ignore color management and how your pages will appear to other users.

And please, don't confuse web design with UI design (I've already got enough hipster wannabes making that mistake).

Converting to sRGB gets you the most consistency - because it is the average of what most users are going to see. If you want to know what users will see: preview in sRGB. If you want your image to look right to most users: convert it to sRGB. If you want your colorscheme to look right to most users: specify it in sRGB.

sRGB doesn't create consistency, but it is the most consistent thing you've got for color right now on the web. It's like saying that a bullseye on a target doesn't create a grouping - which is true, but the bullseye is where the grouping is supposed to be. So no matter how you steady the shot, you aim for the center of the bullseye.

[marcbjango]

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.

[FeedbackCommunityMember]

100% agree with Marc. I don't know any designers that would disagree and this is something I've discussed at least a couple times in the design meetups I go to.

[FeedbackCommunityMember]

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

[marcbjango]

If you want to know what users will see: preview in sRGB

But that's not true. If I'm on a Mac and building a web page or app, the most accurate way to preview what other Mac users see is to view my webpage in Safari or as an app running on my machine.

Viewing the final product *has* to be the most accurate representation, because it *is* the final product. Agree? (I don't see how you can disagree with this point.)

Previewing as sRGB in Photoshop doesn't match the final product in Safari or the running app. All that does is introduce another unneeded layer of conversion, taking it further away from the actual end result.

[marcbjango]

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

This is absolutely NOT true. Here's three colours sampled from this page from screen grabs from the latest versions of Chrome, Firefox and Safari.

Chrome:
Light blue: e2f4f8
Darker blue: d7eaf1
Dark grey ("Help get this topic..."): 5c5c5c

Firefox:
Light blue: e2f4f8
Darker blue: d7eaf1
Dark grey ("Help get this topic..."): 5c5c5c

Safari:
Light blue: e2f4f8
Darker blue: d7eaf1
Dark grey ("Help get this topic..."): 5c5c5c

Notice how they all match? I think you're missing quite a few important details in this discussion. There are rendering differences, but all the colour values match perfectly here. In fact, I've never seen a browser display a colour that didn't match its HTML or CSS value.

Again, I think you have the right answer to the wrong question.

Some of them recognize ICC profiles, some don't.

Let's not confuse things. I'm talking about GIFs and PNGs that don't have ICC profiles... remember that Save for Web can't save ICC profiles for those formats (and that GIFs can't have ICC profiles).

And again, this is for web and UI design. *Not* for displaying photos on the web. *Not* for print design.

[c.pfaffenbichler]

Quote: »Everyone wants the same thing — for Photoshop to behave like their browser.«
No, thank you, but not everyone wants that.
Also, there are people who use more than one browser and those browsers can behave differently so the claim seems to contain a potential inconsistency.

[marcbjango]

When do browsers behave differently? Please give me an example.

Part of the issue is that both you and Chris are using abstract examples. Give me specific examples and I'll show you why Convert to sRGB is a bad idea.

[PECourtejoie]

Marc, how will SFW know that you're outputting for web/UI design, and not just outputting photos? You suggest a different setting for GIF/PNG than for JPEG, right, in that case, it makes sense, if it is not already the case.

I'm sure there are way more Photographers outputting for the web, than there are UI designers, the default makes more sense in Photoshop than it would in Fireworks, IMHO.

Chris has been hearing for years about Photographers that had their photos' colors change once put on the web/seen in a non color managed program/browser.

[PECourtejoie]

Maybe should the thread title be edited so that "for GIF and PNG" is added?

Because the main reason of the addition of that checkbox was the jpegs, that the photographers output for the web, if i'm not mistaken.

[marcbjango]

That's a good suggestion. I'd change the topic to "Convert to sRGB should be off by default, or removed altogether for PNGs and GIFs" if I could. I think I can't edit it now?

Just to clarify: I'm talking about exporting non-photo elements. User interfaces, icons, and non-photo-based website designs.

Also, I definitely accept that it's very likely that UI designers make up a small portion of Photoshop's userbase.

[PECourtejoie]

I can.
Done.

[FeedbackCommunityMember]

So what’s the ideal starting point for a new document?

Which color mode with how many bits and what color profile do you recommend?

[FeedbackCommunityMember]

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.

[marcbjango]

For UI and icon design: RGB, 8bits per pixel, Don't Color Manage This Document, don't use View > Proof Colors and turn off Convert to sRGB when exporting. Oh, and under Edit > Color Settings, set your RGB Working Space to your monitor profile.

And make sure you dither all your gradients (unless you're using them as part of a stretchable button with a 1px wide repeating centre).

[FeedbackCommunityMember]

>> This is absolutely NOT true.

Sorry, but it is true. We've been testing browsers for compliance with color management, and they're all over the bloody map (again, we're working on that in various standards groups).

You think things are simpler because you're missing all the complications.

[FeedbackCommunityMember]

It's needed for GIF and PNG as well -- anytime you have web content, it really should be in sRGB. If you are creating images for the web and working in something that isn't sRGB, you've probably made a mistake.

[FeedbackCommunityMember]

The document profile for web use (and general purpose UI design) should be sRGB - because that is what your users are most likely to see, and how most browsers are going to interpret the color values.

Turning off color management is just avoiding the problem instead of solving it (and means that what you see is guaranteed not to be what your customers/users see). Working in sRGB or converting to sRGB is closest to solving the problem.

[marcbjango]

I'm sure there are way more Photographers outputting for the web, than there are UI designers, the default makes more sense in Photoshop than it would in Fireworks, IMHO.

Thats a fair and sensible point.

What's Adobe's recommended workflow for photos on the web? I would have thought it'd be JPEGs with ICC profiles included.

Either way, converting destructively to sRGB in situations where there's no ICC profile in the file feels like a very blunt instrument to apply to every single image exported from Photoshop.

[FeedbackCommunityMember]

You forgot about color management -- the value in the file (what you measure inside Photoshop) is not necessarily what is going to the display (what you measure with the eyedropper outside of Photoshop). And that will vary across browsers and versions of browsers.

That's why it is important to have everything in a known standard colorspace: so you know what you have, what other people will see, and how each browser will interpret it.

[FeedbackCommunityMember]

So, if I design a red rectangle with a logo that sits on top of it, and I want to output that logo as a gif; not transparent, so it is to have some of that red around it, how do I identify what hex value to set the background of the html rectangle I'm laying it on if I can't trust the color picker in that file?

[FeedbackCommunityMember]

Assuming your document is sRGB, just read the value in Photoshop.

You can trust the color picker in Photoshop for the values in the document.
But you can't trust value scraped off the screen - they have probably been converted along the way to the screen.

[FeedbackCommunityMember]

Whatever format works best, with an ICC profile if possible.
But it needs to be sRGB to account for the browsers that still don't do color management, and those that do but can't get it right.

You need to convert to sRGB at some point, doing so in SFW is just convenient.