Skip to main content
M
MarieMeyer
Inspiring
May 3, 2018
Answered

What is the best way to preview and save images for the web?

  • May 3, 2018
  • 2 replies
  • 4704 views

I realize this is a very basic question, but what is the best way to preview and save images that are destined for use on a website? I'm a bit bewildered as to why "Save for Web" seems to be so disfavored in CC 2018 (buried away and labeled as "legacy" and also as to why the Device Preview has been removed. As you can tell, it has been a few years since I've done work of this sort - is there some new set of features that are meant to be better than these old ones?

Also, is View>Internet Standard (sRGB) + Proof Colors the right way to preview the colors of images destined for the web?

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

      Thank you for your help! Now that I've set that up, I assume it is "sticky" and it will remain my preview setting that will be used whenever I turn preview "on" using command Y. Have I got that right?


      That's right. This setting sticks until next time you change it.

      But again, just so it's noted - you will see exactly the same thing by just opening Save For Web. With the checkbox on, it shows you the sRGB version after it's been converted.

      2 replies

      D Fosse
      Community Expert
      D FosseCommunity Expert
      Community Expert
      May 3, 2018

      Turn off proof! Proof is for print. Just make sure color management is enabled in SFW as per above.

      M
      MarieMeyerAuthor
      Inspiring
      May 3, 2018

      So, the only way to get an accurate preview of the colors is through the multi-step process of File>Export>Save For Web>Preview?

      D Fosse
      Community Expert
      D FosseCommunity Expert
      Community Expert
      May 3, 2018

      It's not a multi-step process. It's a question of enabling color management in Save For Web, because for some reason it's off by default. That's two checkboxes and one rolldown. Set them once and for all, and forget them.

      Your 4K iMac probably has a wide gamut screen. In that case it's crucial that you have a fully functional end-to-end color management chain. Photoshop, Save For Web, your web browser. They all need to have full color management. If they do, this will display correctly.

      If you see inconsistencies, it's because color management breaks down somewhere in this chain. Then you need to fix that broken link.

      What browser are you using? Safari should handle all this correctly.

      D Fosse
      Community Expert
      D FosseCommunity Expert
      Community Expert
      May 3, 2018

      Convert to sRGB, and embed the sRGB profile for added accuracy in color managed web browsers. That's it for the file.

      Previewing in Save For Web is made a bit tricky, because someone apparently insisted that no color management is possible on the web, and even if it was, it wouldn't be desirable (insert sarcasm icon here). As a result all color management in SFW is off by default, and it doesn't match Photoshop.

      The first thing to do is check the two boxes for sRGB and embed. But you're not done. The Preview rolldown is by default set to "Monitor Color", i.e. no color management. You need to change this to "Use Document Profile". The other two alternatives can safely be ignored. They are hybrid settings that tell you absolutely nothing useful.

      Proofing as such makes no sense. If you have a standard (not wide) gamut monitor, everything you see on screen is already soft proofed to sRGB. Proof in Photoshop is used for print, to check for out of gamut colors in a print profile.

      Save For Web (which is based on very old code) will eventually be replaced by the new Export As function. It should handle big files better, and has a somewhat simplified and modernized UI. But still they haven't caught on that web browsers today can handle color management.

        M
        MarieMeyerAuthor
        Inspiring
        May 3, 2018

        My screen is a Mac Retina 4K. From the Photoshop toolbar, I use View>Proof Steup>Internet Standard RGB (sRGB).

        I assume this correct!

        Do I need to then go through the steps of File>Export>Save For Web>Preview in order to get an accurate preview of the colors?

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