Why the $^%#! are my images looking so RED on Facebook?

[C.Steele]

I am soooo frustrated with this. I am not a rookie and have done everything I can think of to correct this problem. I never had an issue before but for the last couple of weeks every time I post something on FB I end up taking it right back down because it looks like crap. On my blog things look fine, so it can't be a browser issue. (or maybe it can, hell I don't know anymore)

One clue I have that I can't figure out is in PS looking at the "save for web" UI the "Before" pic looks exactly like they look on FB - very RED. In the past when looking at that UI the before and after pics looked almost identical.

I believe something has changed in a setting somewhere but for the life of me I can't find it. I have researched the web, checked every setting I can find, and nothing works. Either that or FB is screwy, but like I said I wasn't seeing that issue before.

What's even more frustrating is in my entire workflow I use sRGB so it should never be an issue to begin with (and also why the before and after pics looked identical I presume). I export from LR in sRGB, then sharpen and apply watermark in PS. My PS workspace is also sRBG. I even turned on the "Tell me if something has a different profile than the working space" deal to make sure I wasn't missing something.

Anyway, just throwing this out on the off chance this makes sense to someone and maybe they could help me out.

Chris

[Karl Johnston]

Are you using firefox or IE for a web browser when viewing FB?

[C.Steele]

Firefox

[C.Steele]

Ok I'm going to add some pics to see if I can better explain what I'm seeing.

This first pic is in Photoshop. It's a screenshot of the workspace and the "save for web" UI at the same time. You can clearly see the difference in the 3 images. Shouldn't the "before" image in save for web look like the image in the workspace?

http://www.clsteele.com/photos/Photoshop%20example.jpg

This next screen shot shows Windows viewer, and two separate windows of Firefox (1 showing FB, 1 showing my blog) all open at the same time on my desktop. You can see how Windows viewer and my blog look the same, but the FB image is different.

http://www.clsteele.com/photos/Compare.jpg


Doing this provided another piece to the puzzle. When I screen shot my desktop and drag it in to PS it looks different that what I saw on my actual desktop. What I mean is even though you can see the FB image is different than the others, when I actually view it it's MUCH more pronounced. In the shot above the FB one almost looks good while the other 2 look pale. This is NOT how they really are. The other 2 are on and the FB one is way red.

Anyway, as you can see this could drive a person insane (getting close). As most of you know FB is HUGE for promoting your business and I need to be able to use it. I just can't put my images out there when they look like crap.

This particular couple downloaded their images from my blog (pirates! that's why we watermark :cool:) and both made FB albums and I'm just absolutely cringing when I look at them.

Thanks
Chris

[PixelMagic]

What version of Photoshop are you using? Using Save for Web in versions before CS4 will strip the metadata including the embedded color profile so it will upload without an assigned color space.

Also, after sharpening in Photoshop, are you specifically requesting that the color profile is embedded in the photo(s).

[Hamzeh]

i blv in something different , that FB itself does 'mess' with the photos to match their ' standards ' , which i dont know what they are. i sent them once complaining regarding this playing thing, but no response.

[Lowner]

If it is only the one site, I'd get in touch with them and ask if they do anything to images when they receive them.

[JC4]

I went to your blog. The image on your blog most closely matches the FireFox Facebook image, lots of reds.(also like your before image in the Save For Web UI pic). I'm guessing monitor calibration issue. For a data point, I'm using Safari on a color calibrated iMac.

[C.Steele]

I'm using CS3. These images were actually done w/o using save for web just to be sure it wasn't causing problems. They were exported from LR with sRGB embedded, sharpened, watermark applied, and closed. I uploaded them to my webspace and linked them to my blog.

Answer to second question is no, I'm not doing anything after I sharpen to tell PS to embed a profile. I didn't think I needed to and no nothing about that. I thought if it came in with one and you didn't mess with it, it would leave with one. Can you explain?

Thanks for responding!

[C.Steele]

For reference I use an Eye One Display 2 calibrator. Everything on my monitor looks right and my prints from the lab are spot on with it. This is NOT a monitor issue.

[JC4]

Interesting. I wonder why I'm seeing your blog as matching what you're showing as the Facebook images? I do show the correct RGB color space, in the blog image, so I wasn't thinking it was a color space issue. The only time I've had something similar happen to me, my monitor wasn't properly calibrated. I guess its beyond me, sorry, no other idea.

FYI: Their faces have more reds in that particular photo than any of the others in the set, not too much, just more. Great set too by the way!

[Lowner]

If you post another, original of the same image here then at least theres a known quantity to compare it to.

Like you, as long as your image was sRGB, I think you have done everthing you should as far as sending it. However that does not mean you are in the clear regarding monitor calibration. What calibration hardware do you use, if any?

Edited: I see you have just answered my question.

[PixelMagic]

Just install the LR2/Mogrify plug-in and save yourself the trip to Photoshop. You can do everything you're now doing in Photoshop with Lightroom and this plug-in.

It will sharpen (Unsharp Mask), add watermarks, etc.
http://www.photographers-toolbox.com/products/lr2mogrify.php

I'm using CS3. These images were actually done w/o using save for web just to be sure it wasn't causing problems. They were exported from LR with sRGB embedded, sharpened, watermark applied, and closed. I uploaded them to my webspace and linked them to my blog.

Answer to second question is no, I'm not doing anything after I sharpen to tell PS to embed a profile. I didn't think I needed to and no nothing about that. I thought if it came in with one and you didn't mess with it, it would leave with one. Can you explain?

Thanks for responding!

[C.Steele]

Yeah this is really weird, and as you can see it could drive a person crazy! Thanks for checking it out. It's even more confusing that you are seeing it red on a calibrated monitor with Safari. I can look at it on my fiance's computer (also calibrated) using Firefox and it looks the same as it does on mine.

[C.Steele]

Here is the original image, "saved for web", and uploaded to this site. Let's see how it looks...

[C.Steele]

Looks correct to me, at least with what I'm seeing in PS.

[PixelMagic]

Various versions of Firefox handle color management differently. Also, FF cannot read v4 profiles so when calibrating your monitor its best to create v2 profiles to get accurate colors. Is your calibration based on ICC v2 profiles?

Have you checked the color management settings with FF? While CM might be turned on, the variables work differently between FF 3.4 and FF 3.5 so that's one place to check.

Posting a "Saved for Web" image really wouldn't tell you anything; especially since this one has the metadata stripped.

[C.Steele]

Where are the CM settings in FF? I don't see anything under options

[PixelMagic]

Type "about:config" without the quotes in the Navigation bar.

Then type gfx in the Filter bar to narrow down the options to color management.

What number is gfx.color_management.mode set to? 0, 1, or 2?

[queenbee288]

Where are the CM settings in FF? I don't see anything under options

You have to tell firefox (can't remember right off how) that you want it to use your calibration profile. The last photo you posted looks the same as the FB one to me. Reds too saturated. Before you make yourself crazy you might keep in mind that very few if any of your potential clients on facebook are going to be viewing with a color managed system.

[C.Steele]

Set to 2

[PixelMagic]

But you still haven't said which version of Firefox you're using and whether your calibration is done in ICC version 2 or version 4.

See this link, especially the comments, for clarification on the use of version 2 profiles. Firefox 3.5 does NOT read ICC version 4 profiles: http://hacks.mozilla.org/2009/06/color-correction/

[C.Steele]

You have to tell firefox (can't remember right off how) that you want it to use your calibration profile. The last photo you posted looks the same as the FB one to me. Reds too saturated. Before you make yourself crazy you might keep in mind that very few if any of your potential clients on facebook are going to be viewing with a color managed system.

Sure, I understand that. My concern is that I'm putting out files that are messed up somehow. What I mean is if I know I'm uploading files that are true and correct, I'm fine if their system isn't representing them correctly. That part is out of my control.

The issue is why is that file looking red to you and others on calibrated monitors when it looks fine to me? I can tell you that I didn't do anything in post that would have saturated the reds like that. That image only has a slight vibrance boost, a small tone curve, blacks adjusted, etc. Not sat boost at all and certainly nothing that would have pushed the reds up that far.

[C.Steele]

I'm using FF 3.5.5 and ICC is done in V2

[tkbslc]

What if you use IE/Safari to view them online. Thinking maybe firefox is to blame.

[C.Steele]

See this link, especially the comments, for clarification on the use of version 2 profiles. Firefox 3.5 does NOT read ICC version 4 profiles: http://hacks.mozilla.org/2009/06/color-correction/

Ok I checked out that link and I see the purple box within the purple box. I scanned through the comments and it seems that FF is operating correctly if I see this? If so then it has to be something else correct?

[JC4]

Like queenbee288 said, the last image you posted, matches FB, and matches your blog, as far as saturation. Also, I loaded it in FireFox(still same iMac), and it matches Safari, as I would expect.

Though, no way of knowing right from wrong, or what your intended look is, because can't be sure what you're seeing on your monitor vs mine. Since we're both calibrated, it should be the same, but I'm still confused as to why its different from what you're seeing while working in PS.(if its not a calibration issue, or color space conversion/setting issue). I assume your last posted image looks to you like it does while you're working on it in PS, but to me it has more Reds than what you posted in as your PS working image.

[C.Steele]

I have an idea, lets try this. Here is the same image straight from LR. Maybe we can see if PS is messing something up this way.

*Edit* This looks the same as the one I posted from PS above, which for me is correct and doesn't have too much red. Does it look any different for any of you?

[C.Steele]

Ok, I looked at FB and my blog in IE and they both look the same - red as hell. We know that IE is not color managed so this would mean that what we are seeing in FB is a non color managed image. Right? So does this mean that FB does something to not allow images to be color managed?

[queenbee288]

Still too red. I opened your photo in PS and it is still too red there also. Using the info tool the red channel is 238. Seems a little high but I am not expert. To make it look normal to me I had to adjust saturation of red -10 to I also viewed it in IE and it was too red there also. I also looked on your blog. Looks too red there to me also. I use eye one display also. What monitor do you have? There are some post processors around that really know the numbers for skin tones ect. The numbers in PS is where the true color will be.

[JC4]

Other than the sharpening, it looks just like the previous post, and just like the FB image, and just like the before conversion image. The more saturated look. A bit too much saturation in the skin for my taste, but not so much I can say definitively its the WRONG version.

FYI, I duplicated some of the issue you're seeing in PS, and its an expected behavior. Though opposite of what you're seeing. The image on the right(the after SaveForWeb) is what I'm seeing while working on my image. I achieved this by working in ProPhoto RGB, then in SaveForWeb, I checked Convert to sRGB(which I would want to do). The before shows what would happen if I didn't convert the color profile and let it be displayed in RGB, but with the ProPhoto RGB values. So, I have to assume you're working in ProPhoto or Adobe RGB, and that's why this box looked like this, and probably not what you're chasing as an issue. You may not even have an issue???? I don't know, my knowledge of color management is very weak, so don't read to much into what I'm saying. Just trying to help out a bit.

[tkbslc]

I have an idea, lets try this. Here is the same image straight from LR. Maybe we can see if PS is messing something up this way.

*Edit* This looks the same as the one I posted from PS above, which for me is correct and doesn't have too much red. Does it look any different for any of you?


This looks the same as the facebook on for me - I think your photoshop and firefox are applying a certain color profile when present and are altering what you see. I think almost everyone else sees the non-color corrected files which are what facebook is displaying. I'd have to conclude you are not working in sRGB standard for photoshop.

[Jens]

Chris,
Just a quick question: what kind of monitor are you viewing this on?
Is it possible that you are experiencing the "wide gamut monitor condundrum"?
In short: If you are using a monitor capable of displaying a color space larger than sRGB, an sRGB image will look wrong when viewed with a non-color-managed web browser, even if you have calibrated your monitor. Mostly the image will look red and over saturated.
Have a look at this thread for more details:
http://photography-on-the.net/forum/showthread.php?t=790799

Also see this link for a good explanation of the issues involved:
http://www.artstorm.net/journal/2009/07/color-management-wide-gamut-dell-2408/

[C.Steele]

Ok check this out...

http://www.clsteele.com/photos/compare4.jpg

How do you explain that??!

Thank you all sooo much for hanging with me and trying to help me figure this out. It's helping just to have other calibrated monitors look at it.

@Queenbee - I use a DoubleSight H-IPS monitor. They rock and I'm certain it is not the issue. Also, remember, what I get back from the lab matches my monitor so this has something to do with how images are displayed on the web only.

[tkbslc]

I am still going with photoshop is embedding a RGB or Adobe RGB color profile instead of the standard sRGB. Facebook is stripping the color profile, IE can't display the color profile, and your Blog shot with the still embedded color non-sRGB profile is applied correctly in firefox.

[C.Steele]

Just to be clear - the Firefox blog image matches PS, LR, and Windows viewer for me. The other 3 look way too red.

[JC4]

OK, so why can you give us a screen shots that are different from your LR output? The LR output shouldn't have had an imbedded profile issue? I can understand profiles getting a bit messy in PhotoShop, but LR only deals with sRGB when outputting to JPG, I think. Yup, I have no clue. :)

[C.Steele]

I am still going with photoshop is embedding a RGB or Adobe RGB color profile instead of the standard sRGB. Facebook is stripping the color profile, IE can't display the color profile, and your Blog shot with the still embedded color non-sRGB profile is applied correctly in firefox.

That doesn't explain why it looks the same straight for LR as posted above though.

[queenbee288]

Sorry, didn't mean to muddy the issue. I am an admirer of your photography. I bookmarked your site a long time ago to go back and study but forgot about it. Now I am reminded.:)

[C.Steele]

While checking my color settings for the 100th time I discovered what may be another piece to the puzzle.

Remember when I said my screen shots didn't match up to what I was actually seeing when I opened them in PS? The comparison was still there, one looked redder than the other, but it wasn't AS red as I was seeing it online. The non red image actually looked pale as well compared to what I saw on my blog.

I opened "Assign profile" in PS and saw that the working profile was sRGB and was the one marked as expected. However, when I selected Adobe 1998 the images looked EXACTLY like I see them online. The red ones looked very red and the correct one looked correct instead of too pale.

This would seem to indicate that the images are tagged with Adobe 1998 - I think? But we know they are not. I can look at the profiles (some of you have too) and see that it's sRGB.

*sigh* see what I mean? Frustrating as hell. I'm starting to think something somewhere is corrupt and I just need to wipe everything and start over. Drastic I know, but I don't know what else to do. I can't have my clients passing around red photos all over the web with my name all over them.

[C.Steele]

Sorry, didn't mean to muddy the issue. I am an admirer of your photography. I bookmarked your site a long time ago to go back and study but forgot about it. Now I am reminded.:)

Wow, thank you very much. That means a lot and is really cool of you to let me know:cool:

[Jens]

Chris,
There is nothing wrong with your setup, what you are experiencing is normal:
I see you are using a DoubleSight H-IPS monitor, which is a so called "wide gamut" monitor.
In that case, what you are seeing is to be expected.
When using a wide gamut monitor any non-color-managed application will display an sRGB image incorrectly, even if your display is calibrated. The only way to get an accurate display of an sRGB image on a wide gamut monitor is to use a color managed application.
See the links I posted in post #33.

[C.Steele]

So I'm a bit confused then.

Basically that would mean that the issue is that FB strips the profile from my images. Correct? I can see how that would cause issues if I was working in anything but sRGB, but isn't the default webspace color profile sRGB? So even if it stripped the profile, as long as I edited in sRGB it should look the same.

Maybe I'm way off but I thought that's why many of us worked in sRGB, to make sure the images looked good on our clients non calibrated monitors when viewing online.

*edit* I guess what I'm not understanding is the variance from FB to my blog. Isn't Firefox the viewing application in both instances? You say a wide gamut monitor can't display correctly in non CM apps which I understand. Firefox is color managed. So to my understanding anything viewed with Firefox should look the same (if it's the exact same file). Is this not correct?

[C.Steele]

Ok, so I looked at another photographers blog that had the same images on his blog and FB - they looked identical to me (and color correct I might add). So it really seems like it is something with MY images, and I can't figure it out. Keep in mind also that this is a new thing. I posted images from other shoots months ago and never had an issue, everything looked correct.

I'm leaning more and more toward a complete HD wipe and reinstall of all my programs.

[Lowner]

This is confusing me too. This is the 3rd thread I've read where the finger of suspicion is pointing at a "wide gamut" monitor.

[queenbee288]

Ok, so I looked at another photographers blog that had the same images on his blog and FB - they looked identical to me (and color correct I might add). So it really seems like it is something with MY images, and I can't figure it out. Keep in mind also that this is a new thing. I posted images from other shoots months ago and never had an issue, everything looked correct.

I'm leaning more and more toward a complete HD wipe and reinstall of all my programs.


In my awkward way that is what I was trying to say. I think it is your image. The red channel info in PS is kind of high compared to the other channels. They look red to me everywhere. Your blog, and both that you posted. They are red to me in PS and both IE and Firefox.

[Jens]

Ok, I reread the enitre thread and noticed I had been a bit too quick in my conclusions, or rather I did not get the whole picture. You are in fact using a color managed browser, so you should normally not see a color shift of an image with a sRGB color profile embedded.
Then the only option that remains is that FB is actually changing your image file, and in the process the color space info is stripped off. If the color space info is missing, even a color managed application will send the image data straight to the monitor without any color correction. In that case the image will look approximately correct on a sRGB monitor and incorrect on a wide gamut monitor.
A qucik search on Google will find several statements that says that FB is not displaying the original image, and in the process of converting the image it strips all metadata off, including the embedded color profile. That would explain everything.
Please note that the difference will only be visible on a monitor with a color space that is significantly different from sRGB, which is the case for your monitor. For users with sRGB monitors your image will look more like the original.

[René Damkot]

Have a read here on how the "Save for web" preview works.
http://www.getcolormanaged.com/color-management/saveforweb/

You are using FF 3.5 at default settings. If an image does not have an embedded profile, it'll assume monitorRGB (Which is stupid. Safari works the same)

I assume, like Jens says, Facebook strips the sRGB profile.

Either live with it, or set FF to fully color manage.

[C.Steele]

*Update*

Jens and Rene were right on the money! The before and after discrepancy I was seeing in PS was due to the "original" preview showing what the image would look like on MY monitor in a non-color managed app. Since my monitor is a wide gamut monitor the colors look way off and overly red when they aren't color managed, just as Jens said.

The second piece was the FB problem. FB does indeed strip ALL metadata from an image including the profile. As Rene said Firefox (and some other browsers) assign a monitor profile when there is no tag present (instead of sRGB). This is why I was seeing on FB exactly what I was seeing in the PS "before" preview. Basically a non-color managed image on a wide gamut monitor which = yuck.

The final piece (and fix) was to get THIS ADD ON (https://addons.mozilla.org/en-US/firefox/addon/6891) for Firefox and set it to "Enable color management for - All images" in stead of the default Firefox setting of "...- only images with ICC tags." After I changed this setting I restarted FF and went directly to FB to see if it made a difference. Bingo! Now everything from FB to blog to Windows viewer looks identical for me. Yay!

So in the end Firefox and a wide gamut monitor were the culprits. I'm really happy to have figured this out and know that my clients aren't seeing crappy images on FB and passing them around (unless of course they have a wide gamut monitor).

Thank you all so much for sticking with this thread and helping me figure this out. This has been driving me crazy for quite a while and I couldn't have figured it out without the help from all of you.

Take care
Chris

[René Damkot]

The add-on is easiest, but you can also type "About:config" (without quotes) in the FF adress bar, promise to be careful, then type in "gfx" and set gfx-colormanagement.mode (or whatever the exact wording is) to "1"
"0" is "off", Default is "2"

[C.Steele]

And just as a final note - after re-calibrating my monitor as part of this mess and taking another good look at that image....I think it was too red regardless of all the other crap going on :oops: I remember pushin the magentas up to highlight the sky but I think I forgot to mask it off their faces. Oops!

Anyway, here it is one last time with the red masked off their faces a bit. Hopefully this looks better to some of you. Keep in mind is was below 0 out there so there is no way around some of that red. But their overall skin tones look better.

Thanks again!

[queenbee288]

It does look some better.I still think it looks to warm. One thing that I think makes it a little off is that the skin tones are so warm compared to the coolness of the rest of the scene. did you use a gold reflector or process the skin warmer? When I checked the photo info in PS on the original photo it was 45% magenta, 41% yellow and almost no blue. Given the coolness of the rest of the photo you would expect there to be more blue. I was convinced all along that it was the photo.:D

When I sampled the forehead of the original image this was the color when I input the numbers. His skin looks fine to me now. He has a red nose but you expect that with the cold. She still looks too warm. See how yellow the teeth are? But it is much better.

[C.Steele]

Right you are, but there is a reason for that. This is what was behind me lighting their faces. No gold reflector required :D

[queenbee288]

Ah hah. That explains it.