Skip to main content
Doe Johns
Doe Johns
Inspiring
May 16, 2022
Answered

To have the same colors in Photoshop and on the Web

  • May 16, 2022
  • 3 replies
  • 6051 views

As far as I know (I'm not a pro), it seems there are two ways to achieve the same colors between the image you see in Photoshop and the same image after you save it for Web (File > Save for Web) and upload on a website.

 

The first way is to check "Embed Color Profile" and "Convert to sRGB" check boxes in the "Save for Web" window. Using the first way, you make the exported JPEG as bright as it is in Photoshop.

 

The second way is somewhat opposite. You need to click "View > Proof Setup", and then select "Internet Standard RGB" or maybe "Monitor RGB". (I'm not sure which one. This is one another thing I want to consult here about.) And then you also need to set a checkmark on "View > Proof Colors". Using the second way, you make the colors in the Photoshop as dull as they will be if you save your image for web (File > Save for Web) with both "Embed Color Profile" and "Convert to sRGB" check boxes unchecked.

 

Which way is prefered: the first, the second, or some another?

 

One guy on Internet answered that "the first way isnt really a way at all, its more like let me do random transform on image and hope it dont screw things much. It does nothing to keep colors that are outside the are a of sRGB, or even control how to convert them. This method fine if you dont expect colors to come out the same, which is not your question. The second way you suggest is just plain nonfunctional."

 

But he haven't provide a solution that is good from his own point of view.

This topic has been closed for replies.
Correct answer D Fosse

I didn't necessarily mean to imply an order, just so long as it's done. That's the important thing for web use.

 

If it's just a conversion, a "knockoff" copy from a master file, it doesn't matter where you do it. You'll probably get some clipping, but that doesn't have to be a problem.

 

If you're going to do any gamut remapping to make sure everything is within sRGB gamut without clipping, you necessarily have to do it on the full data, before it goes to SFW. But that would be for particularly critical purposes.

3 replies

TheDigitalDog
TheDigitalDog
Inspiring
May 16, 2022

You can't 'see' what others see if your images on the web. And when a browser isn't color managed, all bets are way off.

You can see on YOUR system what your sRGB (or any color space document) would look like without color management which is rather pointless but exist. There are three options for soft-proofing images as they may appear outside ICC aware applications. Macintosh RGB, Windows RGB, and Monitor RGB are each different ways to soft-proof a document without using Photoshop’s color management display architecture. On your display/machine, not others.

As others have said, convert and embed to sRGB, that's the best solution in a situation where the solution isn't very robust. There is again, no guarantee others will see the image as you saw it, on your display, calibrated and profiled hopefully, in a color managed application.

Author “Color Management for Photographers" & "Photoshop CC Color Management/pluralsight"
    D Fosse
    Community Expert
    D FosseCommunity Expert
    Community Expert
    May 16, 2022

    The problem with Save For Web, which has plagued the internet since the beginning of time, is that it has all color management turned off by default. So it doesn't match Photoshop, which is always color managed.

     

    To enable it, set Preview to "Use Document Profile". That's the only sensible setting, and it will show you how it will look in any modern, color managed web browser.

     

    Also, always check "embed profile". Strictly speaking it isn't required just for web use, because all browsers today will assign sRGB to any untagged material, and color manage based on that. But other applications don't do that.

     

    Lots of people with limited understanding will try to complicate this ("some guy on the internet"). Don't pay any attention.

    • Preview Use Document Profile
    • Convert to sRGB
    • Embed profile
    • Done.

     

    BTW Export As has simplified this a bit, but it's been incredibly buggy lately, and it still doesn't color manage correctly. I still avoid it.

      Doe Johns
      Doe JohnsAuthor
      Inspiring
      May 16, 2022
      quote
      Convert to sRGB

       

      But isn't it better to convert the image to sRGB beforehand? That is, to change the workflow from

       

      1. Open the image.

      2. Edit it (e.g., add an UFO in the sky).

      3. Save it for web with both "Convert to sRGB" and "Embed Color Profile" check boxes

       

      to:

       

      1. Open the image.

      2. Convert is color profile to sRGB: click "Edit > Convert to Profile", and select "Working RGB - sRGB IEC61966-2.1" or just "IEC61966-2.1" as destination profile.

      3. Edit the image

      4. Save it for web with only "Embed Color Profile" check box

      D Fosse
      Community Expert
      D FosseCommunity ExpertCorrect answer
      Community Expert
      May 16, 2022

      I didn't necessarily mean to imply an order, just so long as it's done. That's the important thing for web use.

       

      If it's just a conversion, a "knockoff" copy from a master file, it doesn't matter where you do it. You'll probably get some clipping, but that doesn't have to be a problem.

       

      If you're going to do any gamut remapping to make sure everything is within sRGB gamut without clipping, you necessarily have to do it on the full data, before it goes to SFW. But that would be for particularly critical purposes.

        NB, colourmanagement
        Community Expert
        NB, colourmanagementCommunity Expert
        Community Expert
        May 16, 2022

        For web, work on your images in sRGB colourspace.

        When you save, set the system to embed the sRGB ICC profile. 

        Now, the receiving application such as a web browser will read sRGB, thus it will "know" the meaning of each pixel's RGB colour numbers and convert those to the display profile on the receiving machine. 

         

        I hope this helps
        neil barstow, colourmanagement net :: adobe forum volunteer:: co-author: 'getting colour right'
        google me "neil barstow colourmanagement" for lots of free articles on colour management

         

          Terms & ConditionsAccessibility statement
          Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices