Save For Web color issue [SOLVED]

Engaged ,
Apr 30, 2022 Apr 30, 2022

Copy link to clipboard

Copied

I have a few questions regarding the Save for Web feature:

 

1 - Why is this feature seen as "legacy"? Assuming that Adobe see it as something that's not supposed to be used anymore, what is the alternative to achieve the same results? The Save for Web window has a lot of useful features besides just messing with the quality of the file to make it smaller. Any tips?

 

2 - When I export a jpg using this feature, the colors are different from the original, even if I select the Embed Color Profile. It seems that it converts the colors to CMYK even though my image is set to RGB. So for example my main color #ccff00 gets converted to #ccfd54. Why is that and how can I change this behavior while still using Save for Web? When I use the normal File > Save As, the color is retained, even if I set the quality to 5 (Medium).

TOPICS
macOS

Views

344

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , Apr 30, 2022 Apr 30, 2022
What you're seeing is probably just gamut clipping. Normal and expected - and you probably have some sort of wide gamut display since you can see it. Most standard displays can only reproduce sRGB (-ish) and then you wouldn't be able to see the difference. Your example color is extremely saturated, and if the source document is, say, Adobe RGB, that color is simply out of gamut in sRGB. It can't be reproduced. Of the standard RGB color spaces, sRGB is the smallest. You have "convert to sRGB" c...

Likes

Translate

Translate
LEGEND ,
Apr 30, 2022 Apr 30, 2022

Copy link to clipboard

Copied

1/ Adobe now expect you to use Export instead. They do this, they get bored with part of an app and replace it with something new instead or say "that would be too much work for us to maintain". 
2/ no conversion to CMYK is done. (a) What is your image colour space, let us know if you don't know how to find out (b) How are you checking the colours exactly? 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Apr 30, 2022 Apr 30, 2022

Copy link to clipboard

Copied

@Test Screen Name 

I believe this is what you need?

Screen Shot 2022-04-30 at 6.41.08 PM.png

I've never messed with that panel so I would guess those are the default settings...?

Can you please clarify what you mean by "How are you checking the colours exactly"?

 

I was looking at the Export panel and it seems that it's missing some features and not being able to see the original file in contrast with the optimized (or maybe, I can't seem to understand how to do it), make the Save for Web the best option to export files, as long as the colors remain the same.

 

Thanks!

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 30, 2022 Apr 30, 2022

Copy link to clipboard

Copied

Save For Web is a very old codebase, and the intention is to replace it with Export. They are both specifically intended for web/screen/mobile devices, not print or archival purposes.

 

However, Export development has been incredibly slow and erratic, and as long as it's still a work in progress, we should be grateful that Save For Web is still around.

 

For one thing, the Export preview is still not correctly color managed, even if you check "embed profile". None of them support CMYK, so you can disregard that. If you convert to sRGB from something else, the numbers will change.

 

All this time, Save For Web has worked reliably and consistently, and I still use it. I just check Export from time to time, to check progress. But it's still not ready.

 

 

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Apr 30, 2022 Apr 30, 2022

Copy link to clipboard

Copied

"we should be grateful that Save For Web is still around"

Yes, I was trying the Export panel and it seems a bit "incomplete" or at least stuff that I'm used to doing with Save for Web, is not present in the Export panel (or maybe I just don't know to get there) such as the option to view the original file next to the optimized one.

 

"None of them support CMYK, so you can disregard that"

Yes, when I mentioned CMYK was not that it was converting, but the color itself changes to something similar to when I convert the file to CMYK, hence my mention.

 

"If you convert to sRGB from something else, the numbers will change"

I don't think I'm converting it from something else... I think...

Even though I've been working with PS for maybe 20 years, I never really dove into the deep waters of it (the technical stuff), because all the work I do is pretty much for myself, so I tend to just explore what I truly need, if you know what I mean?

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 30, 2022 Apr 30, 2022

Copy link to clipboard

Copied

 Why do you think that the saved file is CMYK? Are you sure?

That would be a bug if so. 

Open your saved image in Photoshop and at bottom  left click the arrow and select the "Document Profile" option

Here you can see that mine is "Display P3"

Screenshot 2022-04-30 at 10.39.53.jpg

 

Since Save for Web converts to sRGB, your pixel values will change if the originating image was in another colour space, say Adobe RGB perhaps?. That could explain what you are seeing.

 

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 30, 2022 Apr 30, 2022

Copy link to clipboard

Copied

There can be no bug allowing CMYK in Export/Save For Web. They don't support it.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 30, 2022 Apr 30, 2022

Copy link to clipboard

Copied

With a ProPhoto file, Convert to sRGB unchecked, and Preview set to Monitor Color, there will be a strong desaturation that might look a bit like CMYK. I wonder if this is what Danny is referring to.

The preview will be correct when Convert to sRGB is checked, and Preview is set to Use document profile.

 

PS-Sfw-desaturation.png

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 30, 2022 Apr 30, 2022

Copy link to clipboard

Copied

Yes, Monitor Color = no color management. That has always been the default in SFW, which is a bit unfortunate - but luckily, once you change it to "Use Document Profile", that sticks and you don't have to worry about it again.

 

That rolldown has been removed in Export, but it hasn't been replaced with a consistent policy to either show the color managed version or the un-color managed version. At the moment it's quite frankly a mess, and you have no idea what you're looking at.

 

The legacy Export version had it right for a while, always showing color managed, but then they broke it again.

 

In any case, none of this should affect the actual output. As long as you check "embed profile" and "convert to sRGB" you'll be fine.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Apr 30, 2022 Apr 30, 2022

Copy link to clipboard

Copied

"As long as you check "embed profile" and "convert to sRGB" you'll be fine."

Unfortunately for me, that didn't solve the problem...

Here are two images. Maybe you can see something I'm missing? The whole color settings, spaces, etc, is not something I've really explored, as 99% of my work is for myself and always for web. Those technical details were never a real issue for me, up until now. Maybe this is more obvious than other stuff I've done in the past.

Screen Shot 2022-04-30 at 6.38.20 PM.png

Screen Shot 2022-04-30 at 6.41.08 PM.png

   

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 30, 2022 Apr 30, 2022

Copy link to clipboard

Copied

the whole color settings, spaces, etc, is not something I've really explored, as 99% of my work is for myself and always for web.

Even for web use, you still need to pay attention to color settings and color management with respect to your color settings. Those you show are a  little 'problematic' based on the policies alone. 

You really should consider starting here to get a handle on setting them up, no matter the final output/destination:

See: http://digitaldog.net/files/PhotoshopColorSettings.mp4

Photoshop CC Color Settings and Assign/Convert to Profile video

Save for Web should provide sRGB and embed a profile, but not every application is color managed and simply producing sRGB doesn't therefore guarantee a visual match with Photoshop on your system, let alone others (who's systems, displays and applications you cannot control). 


Author “Color Management for Photographers" & "Photoshop CC Color Management/pluralsight"

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
May 02, 2022 May 02, 2022

Copy link to clipboard

Copied

@thedigitaldog 

Thans for the link. I will watch it when I have some free time, as I noticed is 40m long so I need to really focus on that.

Meanwhile I believe I understand what Gamut, Color Spaces, sRGB, Adobe RGB is.

Since my work is primarily web or printing that doesn't require any special treatment, I will stick to sRGB. I think I found how to set it up as the default (using the File > New... > Advanced section, I was able to change it to sRGB and it seems that it stays as the default).

Can you confirm that this is the best way to do it to set it as the default?

Again, thanks for the link and will watch it soon, for sure!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 02, 2022 May 02, 2022

Copy link to clipboard

Copied

You can set up your color setting such sRGB is a default and anything, not sRGB is converted to it and you are informed of all this.


Author “Color Management for Photographers" & "Photoshop CC Color Management/pluralsight"

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
May 02, 2022 May 02, 2022

Copy link to clipboard

Copied

@thedigitaldog 

Sorry... your reply seems a bit confusing. Can you clarify what you mean?

Thank you

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 02, 2022 May 02, 2022

Copy link to clipboard

Copied

Explained in this video.

See: http://digitaldog.net/files/PhotoshopColorSettings.mp4

Photoshop CC Color Settings and Assign/Convert to Profile video


Author “Color Management for Photographers" & "Photoshop CC Color Management/pluralsight"

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
May 02, 2022 May 02, 2022

Copy link to clipboard

Copied

Sorry, my reply probably wasn't clear enough.

My confusion with your reply, was more about the sentence itself that seemed confusing. Maybe you mistyped something, maybe forgot to add some punctuation, etc?

It's just the sentence that seems to not make sense when I read it.

I will check the video anyway. Thanks again 🙂

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 02, 2022 May 02, 2022

Copy link to clipboard

Copied

LATEST

You wrote:

I think I found how to set it up as the default (using the File > New... > Advanced section, I was able to change it to sRGB and it seems that it stays as the default).

Part of this is due to your color settings hence the new video. Part of this is about other doucments you may open or edit, and again, that's part of the color settings: ensuring you always end up with sRGB and are informed when you are not editing sRGB documents, when documents are untagged, what the untagged documents assumption is etc. 

The new dialog is sticky and you can make you own defaults too. There are also several ways you can view the current color space of all open documents (info palette if so set, document lable, if so set etc). Outlined in the video. 


Author “Color Management for Photographers" & "Photoshop CC Color Management/pluralsight"

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 30, 2022 Apr 30, 2022

Copy link to clipboard

Copied

Yes, this might well be gamut clipping. What color space is the original in?

 

Another possibility is that the color difference is caused by jpg compression.

A forum bug prevents enlarging your screenshot, but it seems that you are saving a jpg.

Jpg compression is lossy, and can cause slight changes in color.

The jpg format works best with continuous tone photographs, but if you're creating solid color web graphics, PNG is a much better choice. It uses lossless compression, and colors will not change, except for gamut clipping.

Make sure to use PNG-24, PNG-8 has only 256 colors.

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Apr 30, 2022 Apr 30, 2022

Copy link to clipboard

Copied

@Per Berntsen 

You are correct. When I mentioned CMYK was not that the file was being converted, but more about the "look" of the file compared to the original.

 

Even checking Convert to sRGB, Embed Color Profile and the Preview set to use Document Profile (as someone I believe suggested), I get the same desaturated image. The saturation goes from 100% down to 67%. This is what I just tried and I get the same results:

Screen Shot 2022-04-30 at 6.34.39 PM.png

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Apr 30, 2022 Apr 30, 2022

Copy link to clipboard

Copied

"Why do you think that the saved file is CMYK? Are you sure?"

Sorry, I created a monster here... hahaha

What I meant was that the color is similar to the one if I convert the document from RGB to CMYK. The Save as Web is not converting the file. I was just using CMYK is an example of what the color look like. For example the color I use is #ccff00 and the preview is showing me something different. Comparing them I get this:

ORIGINAL

Screen Shot 2022-04-30 at 6.35.59 PM.png

CONVERTED (look at how the saturation goes from 100% down to 67%). Even the hue is different.

Screen Shot 2022-04-30 at 6.36.23 PM.png

"Open your saved image in Photoshop and at bottom left click the arrow and select the "Document Profile" option"

I don't see that option. Maybe we have different versions and that changed? Here's what I see:

Screen Shot 2022-04-30 at 6.38.20 PM.png

"Since Save for Web converts to sRGB, your pixel values will change if the originating image was in another colour space, say Adobe RGB perhaps?. That could explain what you are seeing."

Even with 20 years of PS experience, the deep/technical aspect of the program was never something I really dove into, because all the work I do is for personal use. I'm not very familiar with the color spaces technicality, maybe you can see if this is what I should be looking at?

Screen Shot 2022-04-30 at 6.41.08 PM.png

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 30, 2022 Apr 30, 2022

Copy link to clipboard

Copied

What you're seeing is probably just gamut clipping. Normal and expected - and you probably have some sort of wide gamut display since you can see it. Most standard displays can only reproduce sRGB (-ish) and then you wouldn't be able to see the difference.

 

Your example color is extremely saturated, and if the source document is, say, Adobe RGB, that color is simply out of gamut in sRGB. It can't be reproduced. Of the standard RGB color spaces, sRGB is the smallest. You have "convert to sRGB" checked, so any color outside the sRGB gamut gets clipped.

 

This isn't as complicated as it seems. Look at the RGB numbers. Any channel that hits 0 or 255 is at the gamut boundary. That's as saturated as it gets. The numbers can't get lower than 0 or higher than 255.

 

How actual colors are mapped to numbers is what defines a color space.

 

BTW, there's nothing special about hex numbers, it's just base 16 notation for RGB numbers. It still depends on the color space that number refers to, so a hex number still doesn't define a color until you also define the color space.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
May 02, 2022 May 02, 2022

Copy link to clipboard

Copied

@D Fosse 

Thank you for the reply. I decided to so some research and found this video (https://www.youtube.com/watch?v=N2T62ZHIu6s) and I think I understand it a little bit better now.

 

So since I'm not going to work with any kind of image that requires more than sRGB (for example on the video he recommends Adobe RGB for printed photography), how can I make my default workflow sRGB so I don't have to deal with this issue ever again? I just want to always see a color and when I export it, that color doesn't change, because it's always using sRGB.

Can you tell me if this is the right way to do it?

I go to Edit > Assign Profile > Working RGB: sRGB IEC61966-2.1

When I do that, I see that the color changes to that less saturated version, the one I see when I use Save For Web.

I noticed that when I use Profile: Display, it gets super saturated.

 

So should I set the profile to Working RGB: sRGB IEC61966-2.1?

I noticed that when I create a new document, in the Advanced section, I can change the Color Profile to Working RGB: sRGB IEC61966-2.1 and if I then create new documents after that change, it keeps that profile as the default. Is this the right way to set it as default or is there another "standard" way?

 

Thank you!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines