Photoshop: CS6 "Save for Web" changes image saturation on .jpg images

  • 1
  • Problem
  • Updated 5 years ago
  • Solved
  • (Edited)
Photoshop CS6, saving for web constantly changes the saturation of the image. I've tried every combination of settings I can think of, but optimized jpg's usually decrease saturation (and sometimes increase it). This is a very big problem as I do a lot of web-optimized graphics.
Photo of Mason Barge

Mason Barge

  • 9 Posts
  • 0 Reply Likes
  • frustrated

Posted 5 years ago

  • 1
Photo of christoph pfaffenbichler

christoph pfaffenbichler, Champion

  • 1208 Posts
  • 166 Reply Likes
In which Color Space do you work?
Photo of Mason Barge

Mason Barge

  • 9 Posts
  • 0 Reply Likes
sRBG

I just tried changing this to all the available options because of your question (Monitor, Adobe 1998, etc.), but alas, without seeing any effect.

I can usually find some setting in the save dialog (generally embed "on", sRGB "off") that will work for stuff I FTP for a website, but I was trying to get a new photo of myself for an avatar and nothing I do seems to affect the saturation at all. They all oversaturate significantly (but not horrendously).
Photo of Mason Barge

Mason Barge

  • 9 Posts
  • 0 Reply Likes
sRGB, sorry
Photo of Dennis

Dennis

  • 4 Posts
  • 1 Reply Like
Mason, it's been a few days since your initial post but if you are still wrestling with this issue, I suggest you read this page on Gary Ballard's site and see if it helps.

http://www.gballard.net/psd/saveforwe...

If you still have doubts after reading that, post again here and I may be able to help. It sounds like you may be trying to match image colors with web page elements (HTML, CSS, etc.). If that is the case, please explain it in a little more detail and I think we can offer you some workflow suggestions for that as well.
Photo of Mason Barge

Mason Barge

  • 9 Posts
  • 0 Reply Likes
Thanks for taking the time to look at this. I'll read the article.

No, my problem is more basic than trying to match a web color via CSS. My saved image will simply appear noticeably more or less saturated when uploaded to the web than on my monitor in Photoshop. As far as I know, the hues seem accurate. Same monitor, I have even minimized Photoshop so I can put them directly side by side.

It doesn't always happen! It seems to happen least often when I embed the color profile and do not "convert to sRGB"

Here, I did a screen capture of Photoshop beside the uploaded image. It happened to me this morning - this time, the upload was higher saturation.

Photo of Mason Barge

Mason Barge

  • 9 Posts
  • 0 Reply Likes
Okay, a link from the link you gave me, to

http://www.gballard.net/psd/honormyem...

seems to have me pointed in the right direction. I have a Dell U2410 with factory-guaranteed color calibration and its own color management scheme, and that might be fighting with the Photoshop sRGB color profile and/or embedded color management in the image.

In the example above, I changed the PS color profile from PS sRGB IEC6 to my monitor's color profile, and the image saturation immediately popped up equal to the upload. So even if I don't completely understand color profiles, I know where the problem is.

I've checked for PS to notify me of Profile Mismatches and missing color Profiles in images when I open them, so I am guessing that this will teach me, by experience, how to handle different situations.

I think I'll be okay now. Thanks for the link.
Photo of Chris Cox

Chris Cox

  • 20280 Posts
  • 812 Reply Likes
You should NOT be using the display colorspace for your working space.

What you did just hid the problem, and the core problem is that you don't understand color profiles or what is happening in different applications as they do or don't correct for your display.
Photo of Dennis

Dennis

  • 4 Posts
  • 1 Reply Like
I strongly recommend to NOT use your monitor profile for your PS working space. It may make things look OK to you but you will likely produce non-standard images for the web and everyone viewing there.

Here is part of a post that I just made in another forum and you may find it helpful:

Regarding color management and the web, you can first break it down into:
A. Sending/posting the image
B. Viewing the sent/posted image

As a photographer, you have control over A but not over B, except in the very limited case of viewing on YOUR machine.

So the best you can do to fulfill your responsibility for A is to post an image with a known, standard color space. If you want the largest possible audience on the web to have the best chance of seeing your image as intended, I recommend using sRGB. The reasons for this suggestion are:
- Most people do not have wide-gamut monitors so they will not see the colors of the wide-gamut color spaces anyway.
- Many people still do not use color-managed browsers or are using color-managed browsers but do not have them configured correctly. Images with non-sRGB color spaces will look significantly off under these circumstances.

I also recommend that you always embed the standard color space inside the image because:
- it helps you see what color space you used after the fact if there is any doubt.
- it helps color-managed browsers understand what color space was used and interpret it correctly. Images without an embedded color space may not be properly color managed, even with a color-managed browser.

Now on to the "B" (viewing) part of the process. There are two possible functions of a color-managed browser:
1. The conversion FROM the embedded color space of the image.
2. The conversion TO the profile (unique color space) of your monitor.

1 is important if you are viewing images that have been posted in a non-sRGB color space.

2 is important if you want the viewed image to be adjusted for the characteristics of your particular monitor. 2 is particularly important for users of wide-gamut monitors like yourself since an image that is adjusted for sRGB, instead of your custom, wide-gamut profile, will look extra contrasty and saturated.

Until recently, only Firefox and Safari did an adequate job for both 1 and 2. Apparently, even the latest IE 10 still only does 1.

Until recently, Chrome only did 2, and I believe that was only for the Windows version and I was never sure that even the Windows version always worked as expected. Now I see that the latest versions of Chrome are now doing 1.

Based on your comments, it sounds like:
- You may be using an old version of Chrome or
- You are using Chrome on the Mac or
- You are using Chrome on Windows but the "2" function of color management is not enabled or not working.

If you are using Chrome on Windows, I suggest you take a look at the instructions on this linked page to see if you can activate the "2" function of color management so images are viewed using the same custom profile that Photoshop uses.

http://blog.dreamstime.com/2012/03/24...

If that doesn't work, you have the following alternatives:
- put up with extra contrast and saturated images on the web
- start using Firefox or Safari (I use Firefox)
- set your monitor to sRGB mode if your monitor has that option. Note that if you do that you are not using an extra feature that you paid for when you bought your monitor. You will also need to create a new profile for your monitor that is tuned to the sRGB mode.
Photo of Mason Barge

Mason Barge

  • 9 Posts
  • 0 Reply Likes
I use a wide variety of browsers (for testing) and the images look identical on all of them, including IE9, Chrome and Firefox 19.0. Best I can tell, the problem is inside PS.

I am going to try working/viewing in the Dell color space and saving images with embedded embedded profiles and see how it goes, since that worked in the image I posted. My working hypothesis is that my problem is that my monitor will not render PS's sRGB correctly.

In fact I created a new document with a variety of colors and the onboard sRGB IEC6 etc. simply does not render colors correctly on my Dell U2410. However, on my other "normal" monitor, color rendering appears to be identical in both spaces.

So this is a problem between the high-end monitor with its own color management system and PS not playing together well.
Photo of Chris Cox

Chris Cox

  • 20280 Posts
  • 812 Reply Likes
If it looks identical, you probably are not embedding profiles in your images - and everything is just displaying monitor color without any correction.

Again, there is no problem in Photoshop here.
You just do not understand how your browsers and other applications correct for your display.

If you use your display profile as your working space, your images will look OK to you, and really wrong for everyone else in the world.
Photo of Mason Barge

Mason Barge

  • 9 Posts
  • 0 Reply Likes
Oy veh.

Well, I do check "embed color profile" in the Save for Web dialogue. Would that make a difference vis-a-vis how the images look to others?

I do have a second monitor but it doesn't really render colors correctly (no matter how much I play with the color settings on it), which is why I shelled out for a more expensive color-calibrated monitor in the first place.

Gah. I guess I'll have to buy a color calibrator and use it to test this )%))** "super-wonderful" monitor. If the colors are off that much, Dell is going to get an earful.
Photo of Chris Cox

Chris Cox

  • 20280 Posts
  • 812 Reply Likes
That helps, that means that some of the browsers will display the image correctly (assuming that your display profile is correct).
Photo of Dennis

Dennis

  • 4 Posts
  • 1 Reply Like
I totally agree with Chris.

Of the three browsers you say you checked, Firefox is the most reliable when it comes to Color Management in my experience. But there are some tricky details.

- If Firefox's gfx.color_management.mode is set to "2", it will not use your monitor profile to adjust images that don't have an embedded color space.

- You can either make this option a "1" so that all "rendered graphics" are color managed or you can make sure that the images you are looking at have an embedded color space (possible for your images, not practical for others). I use the "1" setting and it works for me although the minor downside of this setting is that image colors don't always match other web page graphics as the web developer intended.

This is a page is a little old but it still pretty much explains the relevant Firefox settings:

http://www.earthboundlight.com/photot...

Basically, if you are able to see images OK in PS, you should be able to see the image the same in a properly configured color-managed browser. This should hold true even when using a high-end display that allows calibration and profiling direct to the monitor (and I'm not even sure that is the case here).

Properly calibrating and profiling your monitor is never a bad idea but that is really a separate issue here if you are satisfied with how your images look in PS. Repeating, you should be able to see the image the same in a properly configured color-managed browser.

Also, just to be clear:
- IE9 and IE10 are NOT fully color-managed. They will translate from non-sRGB to sRGB but they will NOT use your monitor profile.
- I also have doubts about Chrome. Google has made some changes recently but I am not sure if Chrome still does proper color management - particularly on the Mac.
Photo of Mason Barge

Mason Barge

  • 9 Posts
  • 0 Reply Likes
I very much appreciate the time and trouble you have taken to educate me about this.

As a practical matter, I don't think this will help me very much. My concern is that that the images look their best for users of websites, so what I want to see on my monitor viewing a website I'm populating is what an average viewer will see. And since there's no such thing as an "average viewer", I look at a couple of the most common resolutions in the primary browsers.

It's not like I'm trying to get perfect color for myself, in other words, to see what it will look like in print. So changing Firefox's color space would not make sense for me. In other words, if I have to change default settings for browser color management. I may like what I see, but it will be different from what most users will see, which defeats my goal.

At any rate, I do get exactly the same colors in all PC browsers I use, anyway. That would seem to indicate that it isn't a browser issues. I have done a rough color card test and using my monitor's color profile in Photoshop does seem to be, giving me incorrect colors.

Anyway, I've already ordered a Datacolor Spyder4Pro calibration system. That way I will be able to eliminate a variable in all of this.
Photo of Dennis

Dennis

  • 4 Posts
  • 1 Reply Like
I understand your objective in making sure that other viewers see your images properly and that is a great objective to have.

But you have to realize that you have a wide-gamut monitor and unless you take steps to adjust for that you WILL NOT be seeing images as others will see them.

The proper steps to "adjust" for your wide-gamut monitor could be:
- putting the monitor in sRGB mode
- or using an appropriate wide-gamut monitor profile (either an appropriate stock profile from Dell or a custom profile made from a calibration/profiling system) with the monitor in wide-gamut mode.

I'd be glad to try to work with you on this but you need to provide some more info and keep an open mind as to what is happening. I detect a certain amount of resistance on your part to being open to understanding how color management works.

One thing I can guarantee you: If you have the following:
- Monitor in wide-gamut mode
- A wide-gamut profile installed in the operating system
- You are looking at an image in sRGB and it has an embedded sRGB ICC profile.
- You are using Firefox will the gfx.color_management.mode set to 1 or 2

then IE and Firefox ABSOLUTELY WILL NOT display the image the same way.

In terms of more info, I have two initial questions if you want to provide the info:
- What operating system and version are you running?
- What is the name of the monitor profile that is currently active in the operating system? In Windows 7, you can check this in the Color Management control panel.

Also, here are some good sources of info regarding color management:
- Andrew Rodney
- Books by the late Bruce Fraser
- For browsers, GBallard has some great info, tutorials, and interactive examples. I'll warn you though that his pages are, shall we say, a bit "busy". Here is a link:

http://www.gballard.net/psd/go_live_p...

Again, I just want to emphasize that I and others are precisely trying to help you "see what others will see".
Photo of Mason Barge

Mason Barge

  • 9 Posts
  • 0 Reply Likes
"I detect a certain amount of resistance on your part to being open to understanding how color management works"

No, really, I'm not resistant! I'm just overwhelmed with work and also a gazillion things always needing to learn. If you mention Apache or Wordpress plugins, I'll probably just dissolve :)

I'm running Win7/Win8 dual boot, but I run almost exclusively Win7 Pro, Version 6.1.7601 Service Pack 1 Build 7601.

Mostly, I have no idea what you're talking about, although my main monitor is in wide-gamut mode. Here's miscellaneous info from the Color Mgt. Control Panel:

For Display 1, which is the one I'm concerned about (Dell U2410 digital - NVIDIA GeForce GTX 650):

ICC Profiles: [General Settings] - DELL U2410 Color Profile,D6500 (default), File name: DELL-U2410.icm

WCS Device Profiles:
sRGB virtual . . . wsRGB.cdmp
scRGB virtual . . . wecRGB.comp

Viewing Conditions Profiles:
WCS profile for sRGB viewing conditions - D65.camp (This is system default)
WCS profile for ICC . .. - D50.camp

Under the Advanced tab, all setting are system default.
Device profile: Turquise/Sepia
Viewing conditions profile - WCS profile for sRGB viewing conditions

Default rendering intent - Perceptual
Perceptual (photo images) - Photography
Relative colorimetric (line art) - Proofing and line art
Absolute Colorimetric (simulate paper) - Proofing - simulate paper/media color
Busines Graphics - Charts and graphs

I hope that's what you were asking for.