Saved JPG or PNG images become over-saturated

New Here ,
Jul 11, 2017 Jul 11, 2017

Copy link to clipboard

Copied

I just got a MacBook Pro and installed Photoshop CC 2017 on it. When I open my image files everything looks normal, but when I try and export them as JPGs or PNGs to post on the web they become waay over-saturated.

I haven't changed any colour setting in Photoshop except View - Proof Setup - Custom, but that shouldn't have any effect. I have sRGB as a working profile and I save the JPGs with Embed Colour Profile. Still no dice... When I open one of my saved JPG in Photoshop again and re-save it I get even more saturation.. so it's definitely Photoshop and not the browser. Help!

Views

9.1K

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
LEGEND ,
Jul 11, 2017 Jul 11, 2017

Copy link to clipboard

Copied

Is you display calabrated well.  Many users use their displays to bright and when they print or displaty their image on other displays they see colors that are much darket than they expect.

JJMack

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
New Here ,
Jul 11, 2017 Jul 11, 2017

Copy link to clipboard

Copied

Thank you for the input! Yes it's calibrated. It's not the brightness that is the issue, it's the saturation. Plus like I mentioned the image gets more and more saturated each time I open and  re-save it in Photoshop.

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 ,
Jul 12, 2017 Jul 12, 2017

Copy link to clipboard

Copied

I don't use a Mac, but it seems that that the MacBook Pro has a wide gamut display, and on these displays images will display over saturated in non-color managed applications.

So the question is, in what application are you viewing the exported images?

And are you viewing on your own computer, or a different one?

When I open one of my saved JPG in Photoshop again and re-save it I get even more saturation.. so it's definitely Photoshop and not the browser.

Does the jpg look normal when you open it in Photoshop?

Where exactly are you seeing even more saturation? In Photoshop? In a web browser?

I haven't changed any colour setting in Photoshop except View - Proof Setup - Custom

Are you by any chance working with Proof colors turned on?

If your work contains saturated colors, and you have a CMYK profile selected under Proof setup, saturation will be reduced, because of the smaller CMYK gamut. Exported images (jpg and png) will then of course be more saturated than the Proof preview in Photoshop.

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 ,
Jul 12, 2017 Jul 12, 2017

Copy link to clipboard

Copied

Hi Susanne

I am puzzled about the part that saturation increases every time you save.

Can you post two jpegs to help us please.

1. Saved as jpeg (with embedded profile as you describe)

2. Reopened and resaved as jpeg with no further adjustments (again with embedded profile)

Dave

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
New Here ,
Jul 12, 2017 Jul 12, 2017

Copy link to clipboard

Copied

Okay, one should never post support questions too late in the evening.. When I open the saved JPG in Photoshop it looks the same as the original, and when I re-save it it does NOT become more saturated. (I mixed it up w the screenshots I took and re-saved.

It's when the JPG or PNG image is shown in either Preview or in Firefox that it looks too saturated. (It actually looks better in Safari, even though I've heard FF has the best colour handling.)

So this looks more like a Mac display/Firefox combo issue than a Photoshop one. Any tips on how to make images look the same in FF as in Photoshop? Or does FF on Mac fall under 'non-color managed applications' like Per mentioned above?

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 ,
Jul 12, 2017 Jul 12, 2017

Copy link to clipboard

Copied

I don't know if Preview is color managed, but probably not, in which case it will display images over saturated.

Firefox should display an image with an embedded profile correctly; with Color management mode set to 1, it will also assign sRGB to untagged images (i.e.images that don't have a profile).

Safari is as far as I know color managed, and should also display an image with an embedded profile correctly.

Are you sure that the profile is embedded?

Can you post an image here that displays over saturated in Firefox?

Are you running the latest version of Firefox?

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 ,
Jul 12, 2017 Jul 12, 2017

Copy link to clipboard

Copied

Hi Susanne

Thanks for the update - I am slightly less puzzled now.

Viewing in non color managed applications will indeed look very different to Photoshop.

Firefox should have color management enabled for images with an embedded profile.

You can check with some browser tests:

Browser color management test

Browser Color Management Test Page

If it is not working you can switch it on by typing about:config into the Firefox Address bar and scrolling down the list until you reach the line gfx.color_management.mode.

Setting that to 0 disables color management; 1 Enables for all graphics ; 2 Enables for graphics that are tagged with profiles

Dave

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
New Here ,
Jul 13, 2017 Jul 13, 2017

Copy link to clipboard

Copied

Thank you Per and Dave for the feedback! I went to the test pages and it seems everything is in working order?

test1.jpg

test2.jpg

But my JPG looks the same no matter if FF is set to 0, 1 or 2.

wasdeafswadwd.jpg

My Photoshop working space is sRGB, when I select "Convert to profile..." to double-check, it states that the current profile is indeed sRGB.
I then go to "Save for web (Legacy)" and check "Embed Color Profile". So the colour prof. should be saved with the image, right? Or am I missing something?

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 ,
Jul 13, 2017 Jul 13, 2017

Copy link to clipboard

Copied

Hi

Your thinking and assumptions are correct.

The next place I would look would be the monitor profile. You said you monitor is calibrated. What did you use to calibrate and profile and is that correct profile being used.

I am sorry that I cannot tell you how to check on a Mac - I am a Windows user.

Dave

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
New Here ,
Jul 13, 2017 Jul 13, 2017

Copy link to clipboard

Copied

When I got the MacBook I lightly calibrated it with the few standard options Mac OS allows to non-expert users. Now, after reading your input, I did a proper calibration with the slightly more professional options Mac OS offers (but has hidden from immediate view). With the new profile it looks about the same in FF, but the psd in Photoshop sRGB doesn't look so good:

hubbbb.jpg

Assigning the newly created profile to the image made it a bit brighter, but the colours were still much too saturated. It's weird, everything else (desktop, browser,) looks a bit better with the new profile, but not PS?

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 ,
Jul 13, 2017 Jul 13, 2017

Copy link to clipboard

Copied

Woah pull back a bit.

The only way to produce a monitor profile is with a hardware  device that reads the values of colours from your screen and then uses its associated software to do the maths and creates the ICC profile (and usually installs it on the system).  The monitor profile should only be used by the color management system and operating system and never assigned to an image. This monitor profile is what tells a color managed application like Photoshop what actual colours will be displayed when it sends certain color values. That way the color management system can translate the values between your image and your screen so your display shows them correctly.

If you are serious about matching color - then such a device (such as the i1 display ) is essential.  You can tweak some screen controls by eye (e.g. to match the white of printed paper) but you cannot produce a monitor profile.

Dave

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
New Here ,
Jul 14, 2017 Jul 14, 2017

Copy link to clipboard

Copied

So I can't use Photoshop properly on a MacBook Pro without investing in a hardware device? Seeing as the new adjusted display profile made the sRGB working space look way off... I guess either that or reverting to the default profile. The image looks bad in FF either way.

On a side note, I've been wanting something like x-rite i1 since forever! Would surely save a lot of headache.

And yes, one should not assign monitor profiles to images.. I was hoping the result could give an indication on what the problem is.

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 ,
Jul 14, 2017 Jul 14, 2017

Copy link to clipboard

Copied

What you need to understand is that the new MBPs have wide-gamut displays. This will only work in a fully color managed environment - without color management it will display sRGB material oversaturated.

You can only use applications that have full color management. The files must have an embedded color profile, and you must have a valid display profile at system level. These are the three essential links in the color management chain. They must all be there.

So it's really simple: if it's oversaturated, it's not color managed. And yes, you really should have a calibrator. The default system display profile should work, but it's a generic profile and not as accurate as one made by a calibrator.

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
New Here ,
Jul 14, 2017 Jul 14, 2017

Copy link to clipboard

Copied

Thanks! Weird that this is even an issue. Since FF apparently does color management, and I have an image with a saved profile, and have tried both the generic display profile and a display profile that is adjusted with the MacBook Pro's tools, then one would assume it would work...


I'm gonna save the expense of the i1 for now and use Safari instead of FF when I'm checking my web images.

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 ,
Jul 15, 2017 Jul 15, 2017

Copy link to clipboard

Copied

Let me rephrase it in a better way: if it's oversaturated, it's not properly color managed. The color management chain may be running, but not working as it should because one link is failing. The links in the chain are:

  • an embedded document profile
  • a display profile that correctly describes the display's actual, current response. This is important. Not some idealized behavior, but actual behavior.
  • an application that reads both these profiles and correctly converts from one into the other.

This is color management in a nutshell. The whole chain needs to be present and correct. Usually the problem is the display profile.

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
New Here ,
Aug 03, 2022 Aug 03, 2022

Copy link to clipboard

Copied

Hey! I see you going way to deep on this, just wanted to share my solution for anybody else wondering like me few minutes ago. 
For me saved images became too saturated because of weird export color management. If the pdf is in CMYK color profile it will convert colors of exported picture wrong. So you should convert color profile to RGB in acrobat first. 
That solved the issue for me

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 ,
Aug 03, 2022 Aug 03, 2022

Copy link to clipboard

Copied

 

@Lego5C99 

Thank you for replying to a post from five years ago and sharing your thoughts. The OP has not logged in to the forums for three years and may not see this. She was not working with PDF or CMYK. Her issue was not using proper color management as detailed by @D Fosse and @davescm .

 

Jane

 

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 ,
Aug 03, 2022 Aug 03, 2022

Copy link to clipboard

Copied

LATEST

@Lego5C99  The poster's issue had nothing to do with PDFs. Also, RGB and CMYK are not color profiles, they are color modes.  A correct color profile is still required in either of those modes.

Correct color management (color managed application + a  monitor profile that describes your monitor in its current state + correct embedded document profile)  is still required when working with either mode. 

 

 

You should only be creating a PDF with a CMYK profile If you know exactly which CMYK profile is required by your print press, there is no generic CMYK. Under those circumstances converting to an RGB profile should only change any colours that are out of gamut in the RGB profile. It should not resolve 'weird colour'.

It sounds like you have a different issue with your colour management workflow and it may be worth starting a new thread describing your exact issue.

 

 

Dave

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