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
    I wish I could show you this full test matrix, but it belongs to a standards body and isn't ready for publication.

    I would have thought you'd have some idea already, given how messed up color handling is in different browsers.
    But if you're ignoring the variations between browsers and changes between versions of the browsers, it's possible you haven't noticed all the problems.
    F
    FeedbackCommunityMember
    Inspiring
    July 27, 2012
    Yes, accurate ON YOUR MACHINE, IN THAT ONE BROWSER.
    But what will other users see? The average of what other users will see is sRGB.

    But your final product will appear different in different browsers, and different versions of those browsers. That's the sad state of the web for now and the immediate future.

    Previewing sRGB in Photoshop does match Safari (in that it assumes sRGB for untagged files, and will honor the sRGB profile for tagged files).

    Working in your display profile and saving without profiles - well, you never know what you're going to get (especially if your display isn't close to sRGB).
    F
    FeedbackCommunityMember
    Inspiring
    July 27, 2012
    What if a client has specified a specific color. Won't that get shifted?
    F
    FeedbackCommunityMember
    Inspiring
    July 27, 2012
    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.
    F
    FeedbackCommunityMember
    Inspiring
    July 27, 2012
    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.
    F
    FeedbackCommunityMember
    Inspiring
    July 27, 2012
    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?
    F
    FeedbackCommunityMember
    Inspiring
    July 27, 2012
    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.
    marcbjango
    marcbjangoAuthor
    Known Participant
    July 27, 2012
    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.
    F
    FeedbackCommunityMember
    Inspiring
    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.

    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.
    F
    FeedbackCommunityMember
    Inspiring
    July 27, 2012
    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.
    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