Skip to main content
marcbjango
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 replies
  • 9806 views

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 replies

    Show previous replies
    F
    FeedbackCommunityMember
    Inspiring
    July 27, 2012
    An addendum:
    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.
    F
    FeedbackCommunityMember
    Inspiring
    July 27, 2012
    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.
    F
    FeedbackCommunityMember
    Inspiring
    July 27, 2012
    Slow and incorrect adoption of color management by browsers hasn't helped, it's true.

    But working in sRGB, or converting to sRGB, will get you a better preview of what your users will see, and a more consistent experience on the web.

    Working in your display color space and ignoring the complexities of color on the web -- we'll, you've got mystery meat and nobody know how that's going to work.
    F
    FeedbackCommunityMember
    Inspiring
    July 27, 2012
    Or you could work in sRGB and get the same result, with more predictable color. And if you work in sRGB, you don't need to convert.

    Or you could understand that you need to convert to sRGB, and pick your colors from the image after converting to sRGB.

    Some browsers do assume sRGB for untagged images, and still try to color manage somewhat. Others only color manage tagged files and send everything else to the display without conversion. One browser actually has a mix of modes (mostly undocumented, so most people won't get to that state).

    I'm not trying to make it more complex than it needs to be - but you seem to have a mental model of how things work that is much simpler than things really are.
    marcbjango
    marcbjangoAuthor
    Known Participant
    July 27, 2012
    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.


    I don't agree with this. With the way I have Photoshop set up, you can set a colour in Photoshop (#FF0010 etc), then export it with Convert to sRGB turned off, the resulting file contains the same value (#FF0010) and all browsers I've ever tested show it as... you guessed it #FF0010.

    Chris, can you create an example that shows my scenario *not* displaying correctly in any popular browser?

    Browsers don't assume sRGB... if an image doesn't have a profile, the browser displays the values natively without conversion, as they should. Why make this more complex than it needs to be?
    F
    FeedbackCommunityMember
    Inspiring
    July 27, 2012
    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.
    c.pfaffenbichler
    Community Expert
    c.pfaffenbichlerCommunity Expert
    Community Expert
    July 27, 2012
    But I wrote sloppily, I should have said »colorspace« instead of »profile«.
    F
    FeedbackCommunityMember
    Inspiring
    July 27, 2012
    (Christoph types too fast)
    F
    FeedbackCommunityMember
    Inspiring
    July 27, 2012
    Numbers are not a color. To make them a color, they have to be associated with a particular colorspace (aka profile).
    Without the colorspace, they represent values that can give different appearances on different devices.
    c.pfaffenbichler
    Community Expert
    c.pfaffenbichlerCommunity Expert
    Community Expert
    July 27, 2012
    »What if a client has specified a specific color.«
    Specified how?
    RGB numbers? Those don’t define an actual color impression without a profile.
    Show more replies
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices