Images change tone when uploaded to web

[TikkiTok]

Hi there. Sorry if this is a repeat question...I've looked around these forums for hours trying to find a solution to the problem I'm having but with no luck. Hope this doesn't get too confusing.

I'm a photo editor for a virtual game and have been doing photos with no real issues for many months. Yesterday, I got a new computer. Upon transferring my in progress .PSD's and finished .PNG images to my new computer, I realized something strange was happening to them. I upload most of my finished work onto Flickr and I've never had an issue of the images changing what-so-ever from CS6 to Web until now.

Here's where it get's more complicated. The older images I've finished on my previous computer and have already uploaded to Flickr look strange when I re-open them in CS6 on my new computer. (I transferred the images via USB flash drive directly over...some PDS's, some PNG's, same result.) However, the images I've been working on but have yet to upload to the Web look fine in CS6 but change completely when uploaded to Flickr.

Now, I know a lot of factors can come into play such as color settings and profile but I have yet to find the proper settings on any listed forum or elsewhere. My goal is not to have to make any changes to the photos profiles after they're finished or even during the editing process, but rather just have the photos look the same in CS6 and on the web at all times, just as they did with my previous computer.

I hope this wasn't too hard to understand and that someone has a solution for me. Thank you in advance for taking the time to help.

This example shows the way I want the photo to appear (same as in CS6) but how it actually appears on the web.

 

[ALB68]

What were your color settings on your old machine (Photoshop). You may have the North American Prepress settings when you should have the one set for the web. Just a thought, take a look under Edit/ Color settings,,,its wayyyy down close to the bottom of the Edit menu. If your resaving your images though, PS should warn you if you have a mismatch, unless you set up otherwise.

 

[TikkiTok]

Thanks so much for the reply. My color settings were at "North America General Purpose 2" but everything else was the same. I changed them to match yours, saved a new copy of the picture and uploaded it with the same problem I have no idea where to go from here.

 

[TikkiTok]

Its gotten to the point now where ANY image I open in CS6, now has a bright yellow hue to it. What am I doing wrong?

 

[Tom Mann]

Its gotten to the point now where ANY image I open in CS6, now has a bright yellow hue to it. What am I doing wrong?

Have you calibrated the monitors on both your old and new systems? If not, all bets are off in terms of what you are seeing on your monitors because you might be seeing nothing more than the differences between the uncalibrated states of the old nd new monitors.

The above is one possible explanation for differences in what you see on your own monitor, using the same software, set up identically in both cases. However, your comment that images coming from the two systems look different after being uploaded to Flickr strongly suggests that you also have a color management problem.

To diagnose something like this, you have to be very systematic. For example, start by taking some problematic image and open it in PS on both systems. To eliminate the possibility of problems arising from uncalibrated or incorrectly calibrated monitors, pay no attention to what you are seeing on the monitor. Instead, use the eyedropper tool to read out the RGB values of something like a uniform sky in a landscape photo. If the RGB values that you read out are different when the same file was opened on both systems, you know that it's a problem that arose when importing the image.

If the RGB values are the same on both systems, use the "Save to web" command on both systems, making sure that you have selected: JPG, "embed color profile", and "convert to sRGB". Now, compare the two resulting JPGs on any one system. If they are the same, then you know that your previous problem arose at the export stage.

If they are not the same, yet the RGB values measured by the eyedropper tool are the same and the working color spaces are the same, then you've got a serious problem and I would recommend either resetting all preferences / defaults in PS or reinstalling it from scratch. To do the former, hold down Alt, Ctrl, and Shift keys (Mac: Command, Option, Shift) while starting up Photoshop. A dialog box will appear asking if you wish to delete the preferences/settings file.

HTH,

Tom M

Tom M

 

[TikkiTok]

I can honestly say I'm not sure which of these suggestions helped or which were not the issue. I changed so many settings on both my computer and CS6 preferences, color settings, color profile etc that I have no idea which one(s) did the trick. All I can say is after all of the suggestions, monitor calibration, a full clean install of CS6 and resetting all other settings to default, the issue is solved. Thanks to both of you for all your help. I can breathe easy now.

 

[egosbar]

reset to default stage and start again or uninstall reinstall and see how you go , from my experience when you start mucking around and dont know what youve done you only have one option and that is reset or uninstall , ive done it on a lot of programs and they always work well after a reset lol

 

[ALB68]

Actually both suggestions could only help and both are necessary. As Tom suggested, monitor calibration is very important. I am guilty of the same sin. I need to purchase the latest device for doing it, trying to decide which to get. I am glad you got it fixed!

I can honestly say I'm not sure which of these suggestions helped or which were not the issue. I changed so many settings on both my computer and CS6 preferences, color settings, color profile etc that I have no idea which one(s) did the trick. All I can say is after all of the suggestions, monitor calibration, a full clean install of CS6 and resetting all other settings to default, the issue is solved. Thanks to both of you for all your help. I can breathe easy now.

 

[jonnyfilmboy]

Monitor calibration is important, but it won't explain the difference between Photoshop's (or Lightroom's or whatever image editing program's) display of an image vs. a web browser's display. I've found there to be several issues with different browsers and image display plugins being used in those browsers. For example, in general, I've found a problem with Google Chrome's display of photos. They are often saturated more in Internet Explorer and IE tends to match the Photoshop/LR colors. I've also found that on certain websites, a plugin is used to display images such as lightbox or equivalent image resizing apps. These are also responsible for color saturation problems.

It seems that it's the wild west out there with all of these competing browsers and plugins. I've also found a difference in the way images are displayed on my work computer vs. my home computer (all things being equal). In other words, both computers using Chrome, displaying an sRGB image at 72ppi, displayed on a website using lightbox, using NEC 26 inch very high end monitors, both calibrated with the same Spyder 3 calibrator, the images look different from one computer to the next. That means there's a 3rd party program that's changing the way the images look. I'm still tracking it down, but it's a frustrating process.

 

[Tom Mann]

Monitor calibration is important, but it won't explain the difference between Photoshop's (or Lightroom's or whatever image editing program's) display of an image vs. a web browser's display. I've found ...

Yes, one indeed has to be cognizant of browser-related color management issues. Fortunately, these have been discussed extensively on the web and are now well understood. For example, just last month, there was a thread on this forum that included discussion of this topic:
http://www.photoshopgurus.com/forum...e-photoshopgurus-com-fully-color-managed.html.

A good, general discussion of the topic is here:
http://www.gballard.net/psd/go_live_page_profile/embeddedJPEGprofiles.html

For even more discussion of the topic do this Google search:
{"color managed" browser safari "tom mann" sitehoto.net}

Cheers,

Tom M