Color in web image does not match image in Photoshop

[michael_davidowsky]

The color in my photoshop (CS3) images does not match the image when viewed in

either the Windows Picture & Fax Viewer (WPFV) or a Web page using Windows

Internet Explorer.

 

My monitor is a 24-inch Dell Ultrasharp that has been profiled with Eye One - the profile

is used as the default profile for my monitor. My working space in Photoshop is Adobe

RGB (1998). After working on an image in CS3, I save it as a 16-bit TIFF with the

embedded Adobre RGB profile.

 

I then resize the image for the web at 72 ppi, convert the image to the sRGB profile,

adjust the image to 8-bit, and save the revised file as a jpg with the embedded sRGB

profile. When viewed within CS3, the colors in the converted image and the original

are identical.

 

When the jpg image is placed in a web page and then viewed with Internet Explorer, or

viewed using the WPFV, the image is more saturated and the blues tend to have much

more of cyan cast. Even the original TIFF image has the same problem when viewed

using the WPFV. The same problem exists when viewing the images on other

computers.

 

Is there something else that I need to do? Is there a workaround?

[photobiscuits]

I am having the same problem when photoshopping pictures. They look great in photoshop or lightroom, but once converted to jpeg they become dark and the colour depth changes. I suspect that it's a normal result of conversion from 16-bit psd to 8-bit jpeg. I keep trying, adjusting levels and brightness/contrast till it looks as best as I can. This strategy is not working too well for me.

[Matt Laur]

Most web browsers don't know what to do with anything in terms of specialized color space like Adobe RGB. Convert to sRGB before saving a JPG for web display. Your problem will go away.

[RobertChura]

Matt should read the entire post. I can read but I have the same issue.

[digitaldog]

Use Safari or FireFox (after setting the preferences for color management) and they will

match. As far as I know, these are the only two color aware (color managed) web

browsers. Saving as sRGB isn't the answer here (there will still be, depending on a

number of factors, differences in color) although sRGB is the preferred color space for

the web due to all these non color managed browsers. But if your goal is an exact

match, you need an ICC aware browser. Note, currently, Flash isn't color managed so

even with these two browsers, a flash generated gallery may not preview correctly.

[emre]

Converting to sRGB is the best workaround, but it is a workaround nevertheless. The solution is to use a color managed browser like Firefox (now in RC1) or Safari.

[Matt Laur]

Read the whole post? That's crazy talk!

<br><br>

Sorry, I was indeed too quick. But... that doesn't change the issue. It makes me wonder if, despite the saved file being in sRGB, PS isn't still set up to work and display in a different space, and is not honoring the embedded space in the saved file.

[marc_rochkind]

"Use a color managed browser" works for Michael, but I doubt that he is only concerned with his own viewing of images on the web. Most likely, they are on the web for others to view. And, the reality is that (1) most users don't have color-managed browsers, (2) even if they did, their screens aren't calibrated, and (3) even if they are calibrated, many people use laptops and other devices (e.g., iPhones) where colors depend on viewing angle and other uncontrollable factors.

 

So... for the web, beyond using sRGB and perhaps even embedding the sRGB profile (it's very small), there's not much else that can be done.

 

Jeffrey Friedl has written an excellent article about this problem:

 

http://regex.info/blog/photo-tech/color-spaces-page1/

[digitaldog]

""Use a color managed browser" works for Michael, but I doubt that he is only concerned with his own viewing of

images on the web. Most likely, they are on the web for others to view. And, the reality is that (1) most users don't

have color-managed browsers, (2) even if they did, their screens aren't calibrated"

 

IOW, they don't care that what they are seeing isn't correct.

 

There are only two groups this issue affects. Those that care calibrate and profile their displays and use ICC aware

applications. Everyone doing so sees the same RGB numbers. Those that don't care (they don't care, not an issue).

 

I find it frustrating that the so many web designers simply refuse to examine the facts here and point out that few

people use Safari or FireFox and that the right solution is to trick (lie to) Photoshop by setting up a soft proof so that

it now matches (incorrectly), the preview they see in a non color managed web browser. As if that's anything at all

useful to do (its a feel good fix).

[marc_rochkind]

"Those that don't care (they don't care, not an issue)."

 

[Note: The following certainly isn't meant to be critical of Andrew, who is part of solution, not part of the problem! ;-)]

 

I do think it's an issue, just not one that an individual photographer can deal with. Many photographers use the web to market their work -- fine art, weddings, and everything in-between. It's a real problem -- an "issue" -- that the industry has just blown off this matter.

 

Whether users know that they aren't seeing the right colors isn't the point. The point is that a photographer who wants them to see the right colors has no way to accomplish that.

 

To my way of thinking, a monitor that needs a $60+ device and complex work on the part of the user to make it show correct colors is an incomplete product. Apps that don't use the color management built-in to Windows and OS X are simply defective. (Can we all please stop saying nice things about IrfanView and the other popular non-color-managed apps?) I have written a color-managed app for both, LRViewer, so I can say that it isn't all that hard to do, although in the case of Windows the documentation is incomplete and inaccurate.

 

I wish we could place the blame where it belongs (monitor manufacturers and software developers) instead of blaming the victim.

[digitaldog]

Part of the problem is that displays are unstable devices and need to be calibrated

regularly, just like a lot of other analog and some digital devices. And users can and

will muck around with OSD controls which once again, changes the behavior. So we

have to calibrate them. Also, no one setting is necessarily "right" or correct. Take

luminance. Out of the box, a CRT might get 100, maybe 120cd/m2 while an LCD might

easily hit 300-350 cd/m2. And setting luminance should be based on the output (print)

you'll be viewing. So there are variables here (same with the white point needing to

correlate with a print under some illuminant). I've calibrated displays for D50, D55, D65,

all based on the viewing conditions of prints to result in good screen to print matching.

There's no "out of the box" right setting.

[marc_rochkind]

I hope the perfect isn't the enemy of the good here! ;-)

 

Sure, a hands-off calibration won't be perfect, but it would be way better than the present state of affairs.

 

We now have printers that calibrate themselves. We could have monitors that do that, too. Maybe there's an arm that swings into place, no harder to operate than a disc-drive door or the legs at the back of a keyboard. Perhaps it could be built into a cover... close the cover, and the monitor calibrates itself on startup. Consumers seem to have figured out how to close laptop covers, piano covers, and waffle-maker covers. Maybe the calibration wouldn't be perfect, so there would have to be a way for experts to tweak it.

 

As it is now, the monitor is made to be wrong, the manufacturer knows it's wrong, and sells it anyway. To a clueless public. (I could same the same for TVs, too, of course... consumers pay $$$ for a HDTV, but never calibrate it. Same issue.)

 

Right now, there's very little customer demand. Progress like I'm suggesting starts with education.

 

The problem is that the education seems to be along the lines of: "YOUR MONITOR'S NOT CALIBRATED! Pay some money! Read a book! Run a weird utility!"

 

[i wanted more exclamation points in the above, but smart photo.net wouldn't allow it. See, even photo.net has smarts. Exactly my point.]

 

That kind of message won't do it.

 

Not that more copies of Andrew's book out there wouldn't be helpful, of course. ;-)

[emre]

If you believe education is needed, why not "read a book"?

 

IF they made a monitor that could calibrate itself, would you be willing to pay more for it than it costs to separately buy a commodity monitor plus a colorimeter? I suspect that is how the economics would work out.

[marc_rochkind]

One little edit to my own post, lest I get a long string of corrections: I should have said "printers that profile themselves." I'm not sure any calibration is going on... probably not.

[marc_rochkind]

The kind of education I'm suggesting -- to raise awareness on the part of all computer users so that they prefer a monitor that shows correct colors -- could not possibly be accomplished by proposing that everyone read a book.

 

In fact, the most practical way would be for Apple to do it, and then the rest of the industry could puzzle out for themselves what this new feature is all about. Apple already puts much more money into their standard monitor than other mass-market manufacturers do.

 

There would be an incremental cost (less than the cost of the separate device), of course, but there's plenty of evidence that consumers will pay for higher quality. Look at the increase in HDTV sales. Or, look what golfers pay for golf clubs. Or, look at Apple's entire product line.

 

What I'm aiming for is that someday consumers will think that a monitor that doesn't self-calibrate is the same as a car with no speedometer, or an oven with no numbers on its dials. In other words, something essential has been left out.

[digitaldog]

Apple tried a "self calibrating display" years and years ago, san's a colorimeter,

didn't work, didn't sell.

 

The printers you refer to are not necessarily self calibrating, they are self profiling

(which raises a question, if they just built them to be consistent, why the need to

keep profiling them). Based on the technology where you have to change the heads,

a new calibration/profile is necessary.

 

Such devices use an instrument to read the color so a so called self calibrating

display also would need such an instrument. As discussed, its questionable if the

large majority of the market would purchase them or even know they need to. That

said, we do see high end display systems (NEC SpectraView, older Sony Artisan,

even older PressViews) that had calibration hardware and software albeit at an

additional price.

 

IF we agree that most users don't know (or care) that their browsers are ICC aware,

what makes us think they would spend extra money for a self calibrating display or

conduct the calibration?

[marc_rochkind]

Consumers would spend the money only after the education that I referred to takes place... might take years. And, after a redefinition of what a display is, so that, as I said, one that's not self-calibrating is considered to be incomplete.

 

Meanwhile, so that those who do buy a self-calibrating display (or do what it takes to get one calibrated now) get the benefits, we (photographers and software developers) need to ensure that the experience they are paying for is one they actually get.

 

I suggest two pledges:

 

1. Every photographer pledges that (a) every photo on the web be properly converted to sRGB and so tagged (no "mystery meat") and (b) every photograph not on the web be tagged sRGB or with another suitable profile, which also embedded, and

 

3. Every programmer pledges that every app that shows a photograph be color managed.

 

Then the software and content infrastructure is there, and anyone who has a calibrated display can benefit.

 

Not unlike the situation with color TVs in the 1950s. Only NBC had color, and only for a few programs. (Bonanza had the best color.) In time, all the networks went to color.

 

But, to fix the photos and the programs is way easier than changing the broadcast system was.

[marc_rochkind]

And also that everyone who posts a list here learn how to count. ;-)

[spritestress]

Michael, I would suggest that you perform some tests as follows.

 

Make a copy of your original RAW.

Convert the RAW file to the sRGB color space if necessary.

Perform edits on the RAW in Lightroom using the sRGB colorspace.

Don't forget to set sRGB in the Lightroom preferences.

Convert the Lightroom modified RAW into a 16bit TIFF with sRGB color space.

Edit the TIFF in PS CS3, making certain the file and the CS3 preferences are all set to sRGB.

Once edited, do a Save As to JPEG, taking care to tell CS3 to keep the sRGB profile.

From Lightroom do an export, of the edited TIFF, converting to JPEG with sRGB.

 

Compare the results and see what you get.

 

If both outputs of this workflow have acceptable colors, that ought demonstrate that using sRGB from start to finish on photos destined for web display make be the optimal route.

 

In any event, monitors cannot reproduce the Adobe RGB or Profoto RGB colorspaces. For that matter many printers cannot either. For example, if you make prints at a photo print store that uses a Fuji Frontier digital photo processing system, that machine is 8bit and it doesn't know anything about ICC color profiiles.

 

So, unless you intend to have your photos printed from CMYK separations on a multi-million dollar high end lithography system, those wide color spaces aren't doing you any good.

[michael_davidowsky]

Thanks to everyone for your responses - I did not expect the philosophical discussions!

 

Sprite - I do not have Lightroom, but assume that using the same workflow using Adobe Camera Raw will yield the same results. I will give it a try!

 

I've been using Adobe RGB on the assumption that its wider color space was more appropriate for my Epson 2200 printer. If indeed the sRGB space more than covers the gamut that the printer can reproduce, then sRGB from beginning to end may make the most sense since I have no plans to do any high-end lithography printing.

 

I guess the other alternative is to do the soft-proofing that Andrew mentioned, but I would prefer not to have to adjust the colors twice, once for a printing version and the other for the web.

[digitaldog]

"Sprite - I do not have Lightroom, but assume that using the same workflow using Adobe Camera

Raw will yield the same results. I will give it a try!"

 

ACR and LR are using the identical pipeline, there's no difference here with respect to what you do,

as long as before you post an image to the web, its converted to sRGB.

 

All editing in ACR and LR are done in high bit, linear ProPhoto RGB. Only when you ask these

products to render the data out are you specifying an encoding color space. And you could (and

probably should) render out and encode in something more useful than sRGB for other needs, then

just convert that document to the size you wish and in sRGB for web use. Or just use LR.'s web

gallery (which will of course build a set of rendered images in sRGB, leaving the original

untouched).

 

There's absolutely no reason to have to "start and finish" the work in sRGB. In fact that's not

happening in LR or ACR anyway. My work comes out of LR in ProPhoto RGB because I plan to

work on it, print it etc, then when the time comes I want to post it to the web, I size, convert to

sRGB from 16-bit ProPhoto (or just build the stuff from LR directly).

 

"In any event, monitors cannot reproduce the Adobe RGB or Profoto RGB colorspaces. For that

matter many printers cannot either. For example, if you make prints at a photo print store that uses

a Fuji Frontier digital photo processing system, that machine is 8bit and it doesn't know anything

about ICC color profiiles."

 

First, the Epson K3 inks (and many other such printers) exceed Adobe RGB gamut so if you have

an image that has saturated colors that also exceed Adobe RGB and encode in Adobe RGB (1998),

you're not taking full advantage of the inks or the gamut of the original image.

 

2nd, the Fuji CAN deal with ICC profiles if the operator is using the appropriate front end (PicPro).

I've profiled a number of Frontiers for labs using this.

 

The NEC 2180 can exceed Adobe RGB gamut as does my LCD3090WQXi while my somewhat

older NEC 2690 can produce 93% of that color space.

[Jerry_]

For colors on the 'Web,' you may be overly worried: perhaps two billion users have monitors that have not been calibrated.

 

 

 

If you should plan to shoot images for 'just posting' on the web, you might try just shooting some in sRGB in the camera, and see what happens when you post your images on the Internet. All the converting is using time, but likely not required for images put on the Internet.

 

 

 

Good luck!

[digitaldog]

Correction, the NEC 3090 'only' displays 97.8 percent coverage of the Adobe RGB, but

the 2180 (the LED) does 102%.

[digitaldog]

"So, unless you intend to have your photos printed from CMYK separations on a multi-million

dollar high end lithography system, those wide color spaces aren't doing you any good."

 

You got it backwards. CMYK Press gamut (lets say U.S. Web Coated (SWOP) v2) is only a bit

larger in some color than sRGB. Nearly any ink jet, most dye subs etc exceed sRGB a great

deal.Some need a color space and gamut refresher:

 

http://www.adobe.com/digitalimag/pdfs/phscs2ip_colspace.pdf

[spritestress]

I imagine this color profile problem is important to many people.

 

I did some tests with some recent shots.

 

After Lightroom adjustments and some 16bit TIFF editing in PS CS3, I exported the 16bit TIFFs from Lightroom using each of the three ICC color profiles available in Lightroom. Then I loaded the resultant JPEGs into the Microsoft Image Viewer and the MS Office Picture Mangeer. I also loaded the JPEGS back into PS CS3. Then I compared them all side by side.

 

PS CS3 is clearly ICC profile aware. The differences in the color gamuts are quite visually apparent with the JPEGs side by side in PS CS3. Often the differences are subtle, but they are perceptible.

 

The Microsoft Image Viewer, the MS Office Picture Manager, Firefox 2.0, IE 6.x, IE 7.x, and various other viewers are all clearly unaware of the ICC profiles in the JPEGs. Regardless of profile, the images all looked identical with all the viewers. Also, their colors were not the same as with the wide gamut profiles. I found this most noticeable in portraits when comparing things like lipstick hues, and haircolor. For example, Blonde hair looks a little "mousy" without the wider gamut, and natural like lipstick colors loose some of their punch, looking a little muddy instead of vibrant or pastel. The JPEG viewers with ICC profile support definitely take some of the bloom of the colors on photos when the are compared side by side with viewers that can more accurately represent their spectrums.

 

I empathize with Michael because I wish I could just take a screen shot of the JPEG with the Profoto ICC profile, make that into another JPEG, and it would look that way without the ICC profile on it. This is a real issue, in search of a real workaround that nobody seems to have figured out. Meaning, how does one get a JPEG without an ICC profile to have the appearance, visible color attributes of the image with the wide color profile?

 

I have encountered these kinds of problems with my print services too, often with great frustration. However, it is good to know that there are high-end print systems like the Kodak/Durst Lambda that support ICC profiles and are capable of producing amazingly accurate output up to 50 inches wide, at a commensurate high cost per print. Most Fuji Frontier shops do not have the front end proofing software systems that support ICC profiles or 16bit images, based on my inquiries with various imaging services.