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

[MarieMeyer]

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]

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]

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?

[D Fosse]

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

[MarieMeyer]

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]

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.

[MarieMeyer]

I guess I'm not explaining myself very well. Can I get an accurate preview of the image in Photoshop BEFORE starting the Save For Web process?

[D Fosse]

If your display is wide gamut and you have a file in Adobe RGB or bigger, and you want to see it as sRGB, prior to any profile conversions - then yes, you can proof to sRGB in Photoshop. Not Internet Standard or anything like that - just sRGB, because that's your target space in Save For Web.

But then on the other hand this is exactly the preview you get in SFW already, before you actually save out anything.

[MarieMeyer]

I don't understand. These are the options that are available (CC on a Mac):

[D Fosse]

When you proof, you go to "Custom" and pick your proof target there. That's the main menu item here, all the rest is mostly useless except in very special cases.

[MarieMeyer]

Under custom I find these:

Is the one I have selected the one you call "just sRGB"?

[D Fosse]

Yep, that's the one.

I see you have "image P3" there, so that means you definitely have a wide gamut display. Apple uses the cinema standard DCI-P3 for their wide gamut displays (unlike everybody else, surprise...)

Sorry, brain short-circuit - this profile is installed by Photoshop, not your system. The corresponding Mac display profile is called "Display P3".

[MarieMeyer]

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?

[D Fosse · Accepted solution]

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.

[rayek.elfin]

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.

[MarieMeyer]

Thank you, rayek. I may not embed the profile. Can I ask what you, as a professional, do when you want to preview the colors of an image that is destined for web use?

[D Fosse]

rayek.elfin  wrote

This is so full of misinformation that I can't let it stand. Just the most important points:

All browsers today support color management, with the notable exception of Edge/IE.

This has nothing to do with OS. If you get inconsistencies between Mac and Windows, it's because you are using software that isn't properly color managed. There is no reason for any inconsistency and frankly I don't know where you picked that up.

Firefox is fully color managed by default. It handles all tagged images correctly by default. The "obscure "setting you refer to is an option to also treat untagged material as sRGB. This is not just images, but everything, html and all. The whole page with all its content is color managed as sRGB. There's no reason for any mismatch between page background and image.

An sRGB profile is not 4, but 3 kB. It's a strech of the imagination to say that this will "blow up" a site. Really! I've seen some slow sites in my time - this one, for instance - but not because of thousands of sRGB profiles stealing your bandwidth. Reality check here, please.

And no, you don't need a properly calibrated screen. All you need is a system monitor profile, which is something any system has.

Mobile users don't care, fine. I'm not going to spoil their fun.

Having good color management on web images isn't for "everybody else". I don't care what everybody else sees. I do it for me. I want to know that it's right. And yes, I might check the actual site to see how it looks in context.

[D Fosse]

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.

[rayek.elfin]

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.

[Per Berntsen]

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]

rayek.elfin  wrote

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.

Actually that's still not quite right. These are two separate settings. Assigning sRGB to untagged material is known as "mode 1". Out of the box Firefox runs in "mode 2", which only color manages if there is an embedded profile. This, incidentally, is how Safari on Mac used to behave, until Apple started to fit DCI-P3 wide gamut panels in the MBPs and iMacs. Then they were forced to adopt the Firefox "mode 1"-model.

Having used wide gamut monitors exclusively for many years, I settled on Firefox mode 1 long ago, and haven't seen any need for anything else. It always displays correctly in any situation.

We could drop the embedded profile if we all used Firefox. Then we'd all have full color management for everything as long as we agree on sRGB. But my policy is that 3kB is negligible. A small web image these days is 250kB - and they get bigger all the time. As high resolution displays get more widespread, web designers will soon start to design at much higher resolution.

[rayek.elfin]

Yes, I turned on "mode 1" in Firefox on my wide gamut screen as well.

Regarding those extra Kbs: I am a bit of a nitpicker. 🙂