Skip to main content
Inspiring
May 3, 2018
解決済み

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

  • May 3, 2018
  • 返信数 2.
  • 4721 ビュー

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?

    このトピックへの返信は締め切られました。
    解決に役立った回答 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

    D Fosse
    Community 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.

    MarieMeyer作成者
    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
    Community Expert
    May 3, 2018

    Couple of things to consider regarding embedding the sRGB profile in your web images:

    • only desktop OS users with a properly profiled screen AND a colour-managed web browser will benefit from embedded profiles. This is not the case for the majority of users (90% or higher).
    • Only Safari on MacOS is by default colour managed, as far as I am aware. For other OSs and browsers the user must turn on colour management, and find an obscure setting to change it.
    • browsers running on mobile devices are not colour managed. 100% of mobile browsers will not use that embedded sRGB profile. Most mobile screens are very close to sRGB anyway.
    • embedding a colour profile increases the file size of an image by around 4K.
    • embedding profiles in a web image may result in colour inconsistencies between Windows/Linux and Macs, resulting in colour differences between (for example) a html page's background colour and the image's background colour that should blend seamlessly. As far as I am aware, most colour-managed web browsers only colour manage tagged images, not the entire browser output. Firefox is the exception here, and keeps things "colour consistent and correct" whether things are tagged or untagged and colour-manages everything in the page.
    • with wide-gamut screens you MUST tag the images and enable colour management in your browser for correct colours.
    • Most web users couldn't care less about correct colour or colour consistency. If we tag them sRGB, it is because WE care, as "professionals".

    If you'd be creating hundreds of thumbnails on your site, and each thumbnail is only a couple of Kilobytes, then embedding the sRGB profile is going to really blow up the overall data bandwidth unnecessarily. Colour consistency/correctness probably isn't important anyway for small thumbs, so in this case I would just remove any superfluous metadata, including the color profile data. When the user opens the original larger image, then I would keep the profile, of course.

    If I am building a web app only used on mobile screens and browsers, I would also remove any embedded meta data and colour profiles. It's not used on mobile browsers, and only increases the size of the GUI elements. Besides, the question pops up whether it is important to put color profiles in images that will be used for GUI creation only, since browsers will treat those implicitly as sRGB (as far as I am aware), and no-one will care if the overall GUI's colours shift a bit around. In particular when that application is going to be used under vastly different lighting conditions and sub-par screens.

    I would go one step further and state here that if your target audience is mobile browsers and users, embedding sRGB profiles (and other ones) in your images is a waste of time, energy, and bandwidth, because the screens and browsers aren't colour managed, the viewing conditions alternate between vastly varying conditions continuously (even within seconds when traveling), and its users couldn't care less about whether the images they view are "colour correct", or not. They are only interested in content consumption.


    I can sum this up nicely: all these potential color problems you talk about - that's what happens when you don't have color management. That's why it was invented. It solves these problems.

    D Fosse
    Community 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.

    MarieMeyer作成者
    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?