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
  • 4722 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?

      Per Berntsen
      Community Expert
      Per BerntsenCommunity Expert
      Community Expert
      May 3, 2018

      I stand corrected after doing more research:

      • all major browsers (Safari, Chrome, IE Edge, and Firefox) excepting Opera are colour managed by default now.
      • You are right, FF's "obsure" settings relate to enabling support for V4 ICC profiles, which are not turned on by default (they are in the other browsers), and forcing FF to enable color management for all rendered graphics, not merely the tagged ones.

      Sorry about that - I relied on old knowledge.

      As far as I am aware, Firefox remains the only browser that colour manages all the page elements? Although my tests show that all four major current browsers treat untagged elements, including CSS coloured elements, as sRGB.

      Btw, I am not saying we shouldn't tag our images as sRGB - I most certainly do. We should in most "regular" cases and I completely agree with you on that point.

      But when I am generating thumbs, working on a web game, a GUI meant for mobile, a site or app meant for mobile only, I won't be including them, because they are a waste of bandwidth and space (we could debate whether a couple of Kb per image is worth it, but in my view it is).

      In this sense it is interesting to note here that saving a jpg file with sRGB profile in Photoshop's new Export As option results in an additional 5.437Kb file size, compared to 2.987KB when I use PhotoLine's web export and embed the sRGB profile. The old Save For Web option results in a nigh-on identical result, and adds 3.072kb to a jpg.

      I checked the meta data, and it seems the new Export As option embeds additional XMP data without informing the user about it. Neither PhotoLine, nor SFW do this - or any other web export tool I work with, for that matter. Which means I would never use Photoshop's Export As option myself. I checked, and Photoshop injects the date and time and some other encoded data bits in your exported files. NOT NICE!

      And yes, I have a colour calibrated system with a Spyder, and keep to a CM workflow myself when working on stuff. But before I export images, I ask myself whether or not adding a sRGB profile makes sense or not for the project at hand. It think this is the reason why the Photoshop devs decided to turn this option OFF by default, because for a lot of development embedded colour profiles make no sense to have. As long as the colours are consistent within the same context (i.e., a webgame, mobile app, web GUI, etc.) it is fine.

      So I agree wholeheartedly with your last statement that CM for web images is for ourselves. I just think we shouldn't just assume to include a sRGB profile by default.


      rayek.elfin wrote

      all major browsers (Safari, Chrome, IE Edge, and Firefox) excepting Opera are colour managed by default now.

      Although my tests show that all four major current browsers treat untagged elements, including CSS coloured elements, as sRGB.

      Opera is also color managed by default.

      And Chrome and Opera assign sRGB to untagged images as well as page elements by default.

      See Re: Photoshop Color Settings for website designs

      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