Skip to main content
marcbjango
Known Participant
July 27, 2012
Open for Voting

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

  • July 27, 2012
  • 68 Antworten
  • 9806 Ansichten

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.

68 Antworten

Inspiring
June 21, 2020
to Marcc : dude you are wrong in everythin..you really dont understand how this work at all..pls do some research ..its not as easy as you think..but pls stop trying to convince everyone that you are right because you are completely wrong! thats not how colorspaces and displays and web works!! 
Inspiring
February 25, 2020
There's one more very valid reason for keeping "Convert to sRGB" - namely, many CMS and other automated management systems will perform image resizing/rescaling/cropping and so on as you load these images. Most of these systems are not color-profile-aware. PHP's GD library (still most widely used in the wild as of 2020) doesn't understand color profiles at all and assumes everything is in sRGB. Imagick does understand color profiles, but the result really depends on your target output and how it was built and linked (for instance, getting WebP output to respect color profiles necessitates a manual compile of the plugin - something not often possible on shared web hosting).

Bottom line is: if you don't convert to sRGB at some point (instead relying on color profiles), you're almost guaranteed to have false color results on your Wordpress, Joomla, Prestashop or other CMS-driven website. And yes, this is valid in 2020 still.
c.pfaffenbichler
Community Expert
Community Expert
January 10, 2013
Thanks for the Link.
marcbjango
Known Participant
January 10, 2013
@7467754 There's a bit more info here: http://en.wikipedia.org/wiki/Quattron

Unless those displays end up on mainstream consumer devices, I'm not sure they're relevant to this discussion about web and app UI PNG and GIFs.
c.pfaffenbichler
Community Expert
Community Expert
December 14, 2012
Could you tell whether those will add different colors apart from yellow?
Inspiring
December 13, 2012
right now, there are only a few displays with larger gamuts than Adobe RGB (like the RGB-Yellow displays).

There are more coming, but not announced yet, so I can't say much about them.
Participant
December 13, 2012
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?
marcbjango
Known Participant
August 8, 2012
When reading anything on the topic, make sure you keep in mind that PNGs saved from Photoshop using Save for Web can't have ICC profiles.

The reality is that there's often a simple choice:

**Option 1** — Are you aiming for consistency across multiple devices? Follow Adobe's advice and use sRGB, just be aware that it's actually unachievable with the current state of browsers. Although, if you want colour management to have a chance of working, you'd better embed colour profiles. Colour management only works properly when the document has a profile and the browser/viewer knows what to do with the profile.

**Option 2** — Are you aiming for consistency within the page across CSS/HTML and images? You have no choice but to aim for “device RGB” and to disable colour management. Despite the advice against doing so in this thread, it's actually a smart way to go for user interface design, where colour accuracy is trumped by consistency between elements (there's nothing worse than a join between a CSS colour and image colour not matching). Please note that going down this path also has issues in Safari 6, thanks to an awful recent change.

It's also worth mentioning that iOS, Mac, Android and other user interface design work can not and should not target anything other than device RGB, because the platforms aren't colour managed for user interface images. And, advice to use sRGB or some kind of colour managed workflow for app design is poor advice... all you're doing is ensuring Photoshop doesn't look like the final result. In those situations you should be doing as much device testing as possible.
Inspiring
August 7, 2012
The best I can find is this one:

http://help.adobe.com/en_US/creatives...

Which is basically just one paragraph that says "use sRGB." Not very helpful. No explanation. No support. Nothing about ICC. No examples. Nothing about JPG vs. PNG/GIF. Nothing about how to then calibrate the CSS colors codes to match those images. Is this as good as it gets?
Inspiring
August 7, 2012
I have, but I'm unable to find any references to the web and/or browsers and how they react to colors. Perhaps you can refer me to something?