Photoshop CS Save For Web Issue

[Sneaky Muffin]

Hi Guys,

Hope you can be of help here.

Im having problems with the save for web feature in Photoshop CS, it's changing my colours slightly when I use it to save images. We have a client specified colour #244CAF (this colour comes from their new branding which unfortunately we didn't design) and this has been used throughout the design of their new website.

When sending the clients the designs to be signed off they came back with a comment that the blue colour was incorrect, after checking the jpgs that were sent the colour that should be #244CAF comes out as #244CAE. Personally I don't think the difference is visible but the client is sticking to their guns that it needs to be exact. In RGB terms the difference is

R36 G76 B175 (client colour)
R36 G76 B174 (output colour)

I'm using Photoshop CS (despite my best efforts to get upgrades purchased... but thats another story). I have abused the googe somewhat severely looking for an answer but only seem to get solutions for CS3. CS just doesn't seem to have the same options...

This is beginning to drive me nuts, so any help would be greatly appreciated.

Thanks GDFers

p.s. Have just tried saving as a gif and the colour in the saved for web file is correct (small grace i suppose) but anyone have any ideas why this happens with jpgs?

edit: typo

[Idesyns]

Here's the fix: Photoshop color profiles for web images (http://www.usabilitypost.com/post/2-photoshop-color-profiles-for-web-images)

NOTE: The following instructions are for Photoshop CS3 running on OS X, but it will be the same for Windows and similar for older versions of Photoshop.

[Sneaky Muffin]

Thanks for the reply.

I had the colour profile set correctly but didn't know about the colour proofing...

However this didn't make any difference, I'm still having the issue.

Now trying to get some more info from the client on how they are picking the colour values, what software they're using etc etc

May end up sending the client a psd and see what they get out of it.......

[Drazan]

Whats really funny about all this is that every single monitor will show that color differently anyway. heh.

[Craig B]

I also think it's funny that it's off by such a slim margin that no one will most likely notice.

[urstwile]

Is the color within the sRGB gamut? If it's not, save for web will give you the closest color it can get to that color, within the sRGB gamut, which is the RGB space that the majority of web browsers use to display color on the web.

Edit: provided I have my RGB space set to sRGB before creating a new file, Save for Web preserves the number correctly. If I start off with a different RGB space, the color changes.

[hewligan]

It doesn't matter what colour gamut it's in, or what profile you use - the jpeg compression algorithm doesn't offer accurate colours. It will inevitably shift your colour slightly in order to compress the image.

If you need an exact colour value to appear in an image then you have to use gif or png.

Of course, as Drazan said, it's ridiculous to do so, since the colour will look slightly different on every monitor it's shown on, and that will be a far larger and more obvious effect than the colour drift introduced by jpeg compression.

[urstwile]

The color does seem to hold provided sRGB is the RGB space the file was created in (or imported into). Save for Web discards any color profile associated with the file, since most browsers (with the exception of Safari and Firefox) disregard color profiles.

[hewligan]

The color does seem to hold provided sRGB is the RGB space the file was created in (or imported into).

The jpeg compression involves multiple transformations that are designed to reduce the file size in ways that the human eye is unlikely to perceive. One of the major ones is a drastic reduction in the colour data, since we are much more sensitive to variations in luminosity than in chroma. It also involves a transformation from whatever colour space the image may originally have been in to the YCbCr colour space. While you may get your original colour values back out at the end of this process, it's very likely that you won't.

The compression is designed to give you colours where you won't notice that they're different, not where the numbers coming out at the end are the same as the ones you started with. That's just the nature of using lossy compression - you have lost some of your original colour data (among other things).


Save for Web discards any color profile associated with the file, since most browsers (with the exception of Safari and Firefox) disregard color profiles.

I'm pretty sure it's only Safari that will actually use the colour profile. Not that it matters much, since colour profiles shouldn't affect the actual colour values stored in the image, only how those values are interpreted.

Or, the short version: People looking for anything like accurate colour on the web should give up. It just doesn't work that way.

[urstwile]

The jpeg compression involves multiple transformations that are designed to reduce the file size in ways that the human eye is unlikely to perceive. One of the major ones is a drastic reduction in the colour data, since we are much more sensitive to variations in luminosity than in chroma. It also involves a transformation from whatever colour space the image may originally have been in to the YCbCr colour space. While you may get your original colour values back out at the end of this process, it's very likely that you won't.

The compression is designed to give you colours where you won't notice that they're different, not where the numbers coming out at the end are the same as the ones you started with. That's just the nature of using lossy compression - you have lost some of your original colour data (among other things).


Just to dispute and not dispute you a little bit, hewligan, but I have very frequent situations where I need to repurpose print materials for one of our clients for the web. I am always able to get their identity red into the correct reading in Save for Web>JPEG, provided I a) set the file up with the correct values in the first place (in InDesign, for example) and then b) open it up in sRGB (from a PDF). When I don't do that, the colors shift. When I do, they don't (at least going by the solid areas). I won't dispute that additional compression on the JPEG probably will shift the color eventually, but with the initial save set to Quality>Medium, it doesn't shift.

And the current version of Firefox (at least for Mac), allows for viewing of CMYK images, which tells me that it's also able to view things in different profiles, like Safari has been capable of for a while.

[hewligan]

Just to dispute and not dispute you a little bit, hewligan, but I have very frequent situations where I need to repurpose print materials for one of our clients for the web. I am always able to get their identity red into the correct reading in Save for Web>JPEG, provided I a) set the file up with the correct values in the first place (in InDesign, for example) and then b) open it up in sRGB (from a PDF). When I don't do that, the colors shift. When I do, they don't (at least going by the solid areas). I won't dispute that additional compression on the JPEG probably will shift the color eventually, but with the initial save set to Quality>Medium, it doesn't shift.

I just tested it.

Set up: an image in photoshop, any size, RGB, sRGB profile. Open the colour picker and enter a hex colour value in the box below the RGB values. Fill with solid colour and open save for web. Go to 2-up, original and jpeg, medium quality side by side.

Repeat that with a few different colours.

Several of the colours were visibly different. Even amongst those that weren't, the eyedropper showed that the actual RGB values were different for all of them.

If, rather than a simple solid colour, I use a gradient, the colour values don't even seem to match at maximum quality (though it's hard to check this accurately without going to more effort than I'm going to ;) ).


And the current version of Firefox (at least for Mac), allows for viewing of CMYK images, which tells me that it's also able to view things in different profiles, like Safari has been capable of for a while.

I checked the Mozilla site, and Firefox 3 does, indeed support ICC profiles.

[urstwile]

Weird, Hewligan, when I tested it, the same way you did (excluding the gradient test), I got the exact same color value when going to Save for Web. I'll try to repeat your test as you've stated it, perhaps I missed a step.

I can only state that with my example client thing (converting from Print to a Web application), I've been able to get a reliable conversion using sRGB as the start-off color mode. This is, provided, however, that I have sRGB as InDesign's RGB space selected, as well as setting InDesign's Transparency Blend space to Document RGB.

I know, you're probably asking "InDesign, WTF?" We do win ads for one of our clients that start off as print ads and end up as emails and Flash banners. So I take an InDesign ad, convert all the colors to RGB (with sRGB as the RGB space), and then create a PDF with no color conversion from there.

[hewligan]

So, I was thinking about this on the bus on the way home, and now I can reveal...

The super-secret way in which Hewligan subconsciously cheated without even realising it

Picking values likely to fail.

Specifically, values that are close to, but not actually, grey.

I have in front of me #CCCCAA. In the original it's R204G204B170, but in a medium compressed jpeg it's R203G204B170. If I go up to the Very High quality, the values do come out correctly, though.

(I would explain why those values are likely to fail, but no one likes it when I start talking maths ;) )

I should also point out that a single, flat colour like that is pretty much your best-case scenario for jpeg colour accuracy. Once you start adding other colours or continuous tones into the image it gets worse.

Which, of course, by doesn't mean that you will never get the original colour out again - it's just that you have no guarantee of doing so. A higher quality of jpeg increases the odds, but even at maximum quality, there's no guarantee.

It's also possible that you *might* get better results with no colour profile, but I'm not sure.

Oh, and I didn't think WTF at the Indesign thing at all. Though I do find that with Print and Web cross-purposed stuff, you can generally make your life easier if you use Illustrator instead. But that's probably not an option for you.

[urstwile]

LOL, hewligan you crack me up. Why? Because although a) I put the InDesign disclaimer in, I knew you'd get it right off the bat, and b) I also knew you'd be thinking about this problem just like I have pretty much since my initial response in the thread. I've been checking back to make sure you haven't come up with some other genius reason as to why your test worked differently than mine. :D

I guess that colors us tenacious, hmm? Although my colorspace for tenacious was set to sRGB, and not Adobe RGB 1998. Perhaps that made a difference as well. :D

[hewligan]

It was very frustrating! I was trying to read a book, but couldn't stop thinking about this! :D

I did actually try both Adobe RGB and sRGB. Well, strictly speaking, I did it in Adobe RGB first, because that's what my computer's set to by default, and then remembered I was supposed to be doing it in sRGB just before I posted and checked that it still worked ;)

In theory, the colour profile shouldn't make any difference. It doesn't change the actual values in the image file, it only tells the rendering device what they mean. In practice, you have to check because you can never be sure when Adobe's ignored the theory ;)

Now, if the question had been about the colours looking wrong, the profile would have been a suspect.

[urstwile]

I think what's happening is an example of not-so-farfignugen. There's no real reason, that I can fathom, why a color, established in Adobe RGB 1998 would change when switched to sRGB. At least when it's established that that color can exist in both spaces. So it just seems kind of random to me.

But it does seem to hold that if you START in sRGB, your odds of the color switching values are lower than if you start in Adobe RGB 1998 and switch it by Saving for Web.

[hewligan]

I think what's happening is an example of not-so-farfignugen. There's no real reason, that I can fathom, why a color, established in Adobe RGB 1998 would change when switched to sRGB. At least when it's established that that color can exist in both spaces. So it just seems kind of random to me.

But it does seem to hold that if you START in sRGB, your odds of the color switching values are lower than if you start in Adobe RGB 1998 and switch it by Saving for Web.

Oh no, if you actually switch from Adobe RGB to sRGB, you will get changes in colour values (at least if you use convert to profile). Since they have different colour gamuts, the actual values will be changed to their best equivalent in sRGB.

However, if you have an image in either colour space and save for web, then you should get the same values out, as it is essentially just throwing the colour profile away.

Of course, all this is largely irrelevant for web, as the point is to preserve a perceived colour, really. An no matter what you do, the reality is that the image will look different on every computer it's displayed on.

[hewligan]

I should also add: despite anything I said above, it's still a good idea to work in an sRGB space for anything web related.

The sRGB space is a conservative model for a generic RGB colour device - in other words, its color gamut is one which should be supported by almost any RGB colour device. So, while browser support of profiles is limited (only Safari and the newest version of Firefox, plus some other minor browsers I forget), and it can't prevent the inevitable colour shifts between the numerous non-calibrated devices on which the image will be displayed, it will still pretty much assure you of avoiding colours that are out of gamut.

[Sneaky Muffin]

Thanks for all this info guys. Should be enough to pacify the client.

You guys are insert multiple positive adjectives here

[urstwile]

However, if you have an image in either colour space and save for web, then you should get the same values out, as it is essentially just throwing the colour profile away.


That's not the result I get, for some reason, and I'm not sure why, since you seem to think I should, and I definitely trust your instinct. But:

Example 1: File starts in Adobe RGB, fill color of C41E3A, R196 G30 B58 turns into E51838, R229 G24 B56.

Example 2: File starts in sRGB, fill color of C41E3A, remains the same in Save for Web.

[hewligan]

Odd. I get a slight (R195G29B56) colour shift that's the same from Adobe RGB, Adobe RGB (1998), and sRGB on that colour.

I can see numerous people claiming in google that save for web automatically converts to sRGB, but that's clearly not happening here. When I do a convert to profile from Adobe RGB to sRGB, I get the values you mentioned, so that's obviously what you're experiencing, but that's not what's happening to me.

What's your working RGB space in your colour settings?

[urstwile]

For my examples above, I used Adobe RGB (1998), which is generally what I have set up. Then I created a new RGB document. For the sRGB example, I changed my RGB in color settings to sRGB, and then created a new document.

I don't have Adobe RGB, are you referring to Apple RGB?

[hewligan]

Yeah, Apple RGB, typo. I just wanted to try another colour space to see if it made a difference, and that was the next one in the drop-down box ;)

Rather than switching my colour settings, I've just been assigning profiles to switch between them quickly and see what's going on. I just tried switching the working colour profiles, and it doesn't make a difference, either :(.

Mind you, I'm using CS2 here. I seem to vaguely recall that Adobe made some change to the save for web for CS3 that annoyed people, but I can't try CS3 until I get home. I can also see a lot of people on the web claiming that save for web does a convert to profile to sRGB, but that doesn't seem to be happening when I try it.

Ah! Here it is: http://tancredi.co.uk/2007/5/13/photoshop-cs3-and-save-for-web-issues

There's a setting that's on by default in CS3 where, instead of discarding the colour profile, it will instead convert to sRGB and then discard.

That's probably a useful behaviour in a lot of cases, but not if you want to preserve those numerical values...

[urstwile]

Ah ha! That's good to know about, hewligan, because I seem to recall now that I didn't have to go through this in CS2. If I was coming out of an InDesign file via PDF, I just had to make sure the RGB color was correct in InDesign, make sure my PDF wasn't set to convert colors at all, and then just place that in Photoshop CS2 and it worked just fine.

I have both CS2 and CS3 on my work computer, I'm going to compare, but I'm sure you've found the culprit.