Color Shift - Save To Web - There really is an issue

OK, Every article I have read about this topic indicates that the user does not really grasp colour management fully. However, I'm going to stick my neck out, and suggest that there really is an issue with either PS or Fireworks CS5, and here's why.
Create a new document - maybe just 100x100px, and choose "Don't color manage this document" when creating it. Fill it with a solid colour, I used RGB 24 16 44 - a dark blue. Now, we have an un-managed swatch.
Save this to web as a JPG, making sure that no conversion to sRGB is taking place (Convert to sRGB is unchecked). In the Save to Web window, you can hover over the swatch and see the colours are still RGB 24 16 44 - so far so good...
Save it as a JPG at 100% quality, just to be sure. Also, save it as a 24bit PNG.
OK, now do something similar in Fireworks... name your files accordingly...
Now open the files in the opposite applications. There SHOULDN'T be any colour shifts at all - you are dealing with raw, un-managed RGB files. However, the JPGs in both instances have shifted. PNG files are spot on.
Can someone explain - without being a terse smart arse - exactly what is causing this? And please, if you are going to glibly refer to some FAQ or such, supply a URL. Sorry, I know the vast majority of folks here are helpful, but I find the quality of some replies aren't worth reading.
Steve

I think you can deduce the reason by looking really closely (literally, zooming in) at how .jpgs are constructed. There is a grid of sampling areas (the size based on the quality setting) and each 'block' is like a little gradient, that is the trick that jpg uses to compress. If the program could not change a colour, it would not be able to compress.
Non-lossy formats (eg: zip) look at compressing the data, if it sees a chain of 300,000 zeros, it logically says 'put 300,000 zeros here', that is quicker than literally writing the zeros.
Lossy methods look at the colour of a group of pixels and then substitute them with a mathematical gradient that averages out the content of the block and where you have little detail, the compression is greater because the little blocks are easily described as bland gradients. (bland blends? hehe).
That is why final file sizes in jpgs are variable for the same pixel dimensions, a fact which has baffled many here, because a complex image cannot be averaged out as easily as a plain one.
Again: If the program could not change the colour of pixels, it would not be able to compress in this way.

Similar Messages

PNG changing colors using save for web (CS2)

Im having a problem with making PNG pictures when using the "save for web" function (this also happens in Image ready)
I make an image in sRGB color space and chose "save for web" and set the settings, all looks fine and i save it as png8 or png24.
Then when i view it in a browser the colors af "off" (desaturated) ??
But if i chose "Save as" in Photoshop, and chose png, and save it that way, the color macth up and looks allright.
What im a doing wrong ??
I have made a test with to sets of colors / picture one with "websave" color and one without then save them "using save for web" in gif, jpg with profile, png8 and png24
The gif and jpg goes well but the png's colors goes "off"
I also saved the to files using "save as" and here the png's colors looks fine
(Ther are also some screendums of my color setting, "save for web" setting and my screen profile if that can be of anny help
http://home19.inet.tele.dk/jgom/pngtest/
Also! can anybody tell me this ?
When using "save as" i cant chose what png im saving as ? (8 or 24) What type of png dos PS use when you save it like that ???

Now I've read up on it, it seems the issue is indeed gamma.
(I really appreciate the "that's impossible, you must be doing something wrong" comments, by the way. Not "hmm, I don't know," but actually "what you've described in detail isn't happening; you're imagining things." Super helpful.)
Anyway the real question is: is there a way to stop Photoshop from including gamma data? It's apparently an optional portion of the PNG spec.
The whole gamma thing is unfortunate, but the *really* unfortunate bit is that Photoshop includes this information at all, particularly in a Save for Web context.
Most importantly, it seems this has been an issue for some time (Google "PNG Photoshop gamma"), and PNG is usually used for web, so why on Earth hasn't Adobe addressed this? Let's not forget that Photoshop is the industry-leading tool, and the Extended version costs $1000 by itself. The only options I've seen for saving as PNG in PS so far is sRGB conversion, bit depth, transparency, and interlacing. This whole gamma thing seems pretty unacceptable behavior, even by default.
I'm looking into pngcrush; does anyone have a simpler solution to strip the gamma information? Of course, if there's a way to do this in Photoshop itself, please please let me know.
Thanks.

Photoshop CS3 color management "Save for Web" problem

This problem is getting the best of me.......
After spending 3 full days researching this problem, I am no closer to finding an answer than when I started. I still cannot produce a usable image through the "Save for Web" feature of Photoshop CS3. I have read web page after web page of "Tips, Tricks and Recommendations" from dozens of experts, some from this forum, and still I have no solution... I am exhausted and frustrated to say the least. Here's the simple facts that I know at this point.
I have a web design project that was started in PS CS1. All artwork was created in photoshop and exported to JPG format by using "Save for Web". Every image displays correctly in these browsers (Safari, Camino, FireFox and even Internet Explorer on a PC).
I have recently upgraded to PS CS3 and now cannot get any newly JPG'd image to display correctly. My original settings in CS1 were of no concern to me at the time, because it always just worked, and so I do not know what they were. I have opened a few of my previous images in CS3 and found that sRGB-2.1 displays them more or less accurately. I am using sRGB 2.1 working space. Upon openning these previous image files, I get the "Missing Profile" message and of course I select "Leave as is. Do Not color manage". CS3 assumes sRGB-2.1 working space, opens the file, and all is well.
The problem is when I go to "Save for Web", the saturation goes up, and the colors change. The opposite of what most people are reporting. Here's another important point... new artwork created in CS3 does exactly the same thing, so it's not because of the older CS1 files.
I have tried every combination of "uncompensated color", "Convert to sRGB", "ICC Profile", etc. while saving. I have Converted to sRGB before saving, and my monitor is calibrated correctly.
I have tried setting the "Save for Web" page on 2-up and the "original" on the left is already color shifted before I even hit the "Save" button. Of course, the "Optimized" image on the right looks perfect because I am cheating by selecting the "Use Document Color Profile" item. Why do they even have this feature if doesn't work, or misleads you?
Does anyone have any ideas what could be happening here? Why is this all so screwed up?
CS1 worked fine out of the box.
Final note: I do have an image file I could send along that demonstrates how it is possible to display an image exactly the same in all 4 of the browsers I mentioned with no color differences. It is untagged RGB and somehow it just works.
I am very frustrated with all of this and any suggestions will be appreciated
Thanks,
Pete

>> First of all... I'm using an Adobe RGB image master... I open it and get the Profile Mismatch Screen... I choose Use Enbedded profile... all looks well. Next I go to Proof Setup > Monitor RGB... again all looks well, no change that I can tell.
This has further confused the issue on several points, not the least of which version PS you are doing this with?
>> AdobeRGB> Convert to Profile > Working Space sRGB-2.1... all still looks well... but now, when I go to Proof Setup > Monitor RGB... I see the insane oversaturated look that is driving me nuts.
That is your strongest clue...it sounds like you have a bad system or bad monitor profile. To rule out the monitor profile: Set sRGB as your monitor profile in System Prefs> Displays> Color.
>> Adobe RGB image master... I open it and get the Profile Mismatch Screen... I choose Use Enbedded profile... all looks well. Next I go to Proof Setup > Monitor RGB... again all looks well
That doesn't make sense, stripping an embedded AdobeRGB profile should desaturate the color in Softproof MonitorRGB, especially the reds -- you have something wacky going on there.
At this point I think you need to review the links and get a grip about how color management and profiles work...
BTW, forget about setting ColorSync in PS COlor Settings, use Adobe ACE.
MO,
I think SFW is fixed under CS3 :) By default it Converts to sRGB and strips the profile.

Color Trouble - Save for Web

Hi,
When I save for web and devices in Illustator and then open the html document in Dreamweaver, the colors of my document appear VERY washed out. In AI I have the RGB set to sRGB and the color mode set to RGB.
Could someone suggest what might be happening here?
Thanks!!

When you import a file you want to import an RGB file with a RGBs profile and you want to know that so that you can change it. If you have color management turned off you will not know what happened and it will not match.
Unless you take the time to make everything match then it will not work.
So any place image or file should be RGBs the document should be RGB and the color settings should be RGBs. If you place an image that is Adobe RGB 1998 and the your settings in AI is RGBs then there will be a change in the color and this is expected but not a wanted result. By embedding you are forced to go back convert the profile to RGBs in Photoshop then replacing it in Illustrator, this allows you to correct any difference there is so you can know what it looks like when place in Illustrator otherwise Illustrator will convert it to RGBs when save for the web but without any adjustments.
So yes I say they are wrong.

Problem: Color Management/Save for Web on Wide Gamut Monitor

Hi,
I've got a problem with color management - I thought I understood it, but it seems as if didn't. So I'm trying to kindly ask for help.
I'm printing, and also trying to save an image for Web.
My setup:
- Win 7, CS 5
- Calibrated Wide Gamut Monitor (eizo cg223w)
- Photoshop set to ProPhoto (I don't want to start a discussion adobergb vs prophoto)
- Save for Web and Devices, Embed Color Profile, Convert to SRGB
- Viewing in Firefox 3.6 with Color Management enabled
Problem:
Image: http://dl.dropbox.com/u/311345/luchs-1024.jpg
If I compare the file in Firefox and Photoshop, the Firefox presentation is slightly more saturated - and I have no idea why.
I thought it should work with the above workflow.
Here is a screenshot where you can clearly see a difference (Note: the additional over-saturation here is caused by the wide gammut monitor when taking screenshots, in reality its not as dramatic as that): http://imgur.com/MFPbU but you can clearly see the difference.
I would be very very thankful for any pointers what I'm doing wrong in my workflow!
Thanks in advance,
Christoph

function(){return A.apply(null,[this].concat($A(arguments)))}
ch_bla wrote:
- Monitor calibrated
- Edit under ProPhoto RGB, 16 bit raw files
- Save for Web and Devices, Embed Color Profile, Convert to SRGB
Is this the preferred way?
It's a reasonable and correct way to do it, assuming you want to embed a profile in the images.
Since at least in some browsers and cases the colors selected within the HTML elements must match image colors, one can sometimes make a case for not embedding any profile at all, but that's really looking backwards. Browsers are moving forward toward not only managing colors in images but also in the HTML elements themselves. If you want your images accurately portrayed in as many places as possible you're doing the right thing looking forward.
Personally I embed the sRGB profile in my web images, as you are doing. And I check things primarily with IE and Safari.
Unlike you, I prefer to edit using the sRGB color space, but that's just personal preference. I find it more convenient to use File - Save As instead of File - Save For Web & Devices, and I get caught by gotchas less often this way. Your preference ensures you don't lose any colors at the extremes of the gamut while editing and it could easily be argued that that's better, depending on what image products you produce.
As for the article you mentioned, anyone who would set their preferred working space to Monitor RGB or use Proof Colors in normal editing is asking for trouble, and may not understand color management at all.
-Noel

Using Illustrator CS6, how to preserve drawn colors when Save For Web to PNG?

Using Illustrator CS6 on Mac OSX 10.9.1:
step 1. I open a new file for Web profile.
step 2. I verify that File > Document Color Mode is RGB.
step 3. I draw a square and set it's color to 0,103,197 (decimal).
step 4. I click File > Save For Web
step 5. In the popup that opens, I set to PNG-24, and verify the option Convert To sRGB is not selected.
step 6. Using the Mac's DigitalColorMeter, I observe the color is 0,109,191 in the Save For Web popup. If I save it, then open the saved PNG file, it's color is also 0,109,191.
How to do this so the colors don't change?
step 7. I close Save For Web popup.
step 8. I verify Edit > Color Settings for Working Spaces is set to Monitor RGB, and that the Color Management Policies for RGB is off.
step 9. I verify Edit > Assign Profile is set to Don't Color Manage This Document.
step 10. I verify View > Proof Colors is off.
Can anyone provide a set of Illustrator CS6 settings that let me save a PNG image with the same colors it's drawn in so I can use that PNG image in a website?
I must be missing something obvious, because anyone working in web design must do this day in and day out, please let me know what procedure people follow to achieve this.
UPDATE:
Using the above procedure DOES preserve the colors when embedding the PNG image in a webpage viewed in Firefox and Chome, but NOT for Safari. Also, the colors are not preserved in Mac's Preview software, as well as Microsoft Office 2011 for Mac.
I'm pretty new to all this. Hoping someone can provide some perspective on what typical procedure people use for web development when working with colors in Illustrator CS6.

Using Illustrator CS6 on Mac OSX 10.9.1:
step 1. I open a new file for Web profile.
step 2. I verify that File > Document Color Mode is RGB.
step 3. I draw a square and set it's color to 0,103,197 (decimal).
step 4. I click File > Save For Web
step 5. In the popup that opens, I set to PNG-24, and verify the option Convert To sRGB is not selected.
step 6. Using the Mac's DigitalColorMeter, I observe the color is 0,109,191 in the Save For Web popup. If I save it, then open the saved PNG file, it's color is also 0,109,191.
How to do this so the colors don't change?
step 7. I close Save For Web popup.
step 8. I verify Edit > Color Settings for Working Spaces is set to Monitor RGB, and that the Color Management Policies for RGB is off.
step 9. I verify Edit > Assign Profile is set to Don't Color Manage This Document.
step 10. I verify View > Proof Colors is off.
Can anyone provide a set of Illustrator CS6 settings that let me save a PNG image with the same colors it's drawn in so I can use that PNG image in a website?
I must be missing something obvious, because anyone working in web design must do this day in and day out, please let me know what procedure people follow to achieve this.
UPDATE:
Using the above procedure DOES preserve the colors when embedding the PNG image in a webpage viewed in Firefox and Chome, but NOT for Safari. Also, the colors are not preserved in Mac's Preview software, as well as Microsoft Office 2011 for Mac.
I'm pretty new to all this. Hoping someone can provide some perspective on what typical procedure people use for web development when working with colors in Illustrator CS6.

How differs soft proofing in View - Proof Colors and Save for Web - Preview?

Hi, I'm currently confused with one inconsistency. My working space is Adobe RGB and I use calibrated monitor. After I finish my work on image I go to View -> Proof Colors -> Internet Standard RGB. Image looks terribly with the overall violet/purple hue. Then I open Save for Web dialogue, I check Convert to RGB and from Preview options I select again Internet Standard RGB. Now the previewed image looks as expected. The same results I get if I manually convert image to sRGB before soft proofing and saving for web. So... what's the difference between preview in Proof Colours and in Save for Web? Thank you for your opinions.

Hi 21, thank you for your input. All what you say makes perfect sense, it is exactly how it should work and how I expected it works. My problem was, that while testing this theory in practice, I have come to different results. I expected, that if I stick to the theory (meaning keeping in mind all rules you perfectly described) I should get the same result in both soft proof and save for web preview. But... it was not the case. Save for web preview offered expected results while soft proof was completely out of any assumptions and colours were totally over-saturated with violet/purple hue. Also, Edit -> Assign Profile -> sRGB gave another result then Soft Proof -> Custom -> assign sRGB (preserve numbers), but the same as save for web preview. What troubled me was why this is so.
Today I've made tests on hardware calibrated monitor and... everything works exactly as you describe and as I expected.
Then I went back to another monitor which is software calibrated (both monitors are calibrated with X-Rite i1 Display Pro). And again... I received strange results described above. So I did the last thing I thought and disabled colour calibration on that monitor. And suddenly... both soft proof and save for web preview gave the same result.
Probable conclusion: soft proof and save for web preview (together with Edit -> Assign Profile) are programmed to use different algorithm which is evident on standard gamut monitors with software calibration. Question can be closed.
Gene and 21, thank you for your effort.

A different take on the "Save For Web" color shift issue...

Ok, everyone who has fussed much with photoshop and "Save For Web" knows about the color shift issue. If you want your colors to look right after you "save for web", you have to work in the sRGB colorspace, and have Proof Colors checked (soft proofing on) and the proof color setup set to Monitor RGB, otherwise what you get looks terrible when displayed in a browser.
But of course if you are editing for print, this is exactly what you DON'T want to do. Well, I work in both. In fact, often the same images, and I want them to appear as close as reasonably possible in both print and web formats, and without a lot of fussing on my part. And I'm pickiest about the print mode, since I have the most control there, so that's the way I want to edit by default.
Nothing new here.
Now comes the interesting part (in my mind, anyway). Obviously there is a known remapping -- because PhotoShop DOES it when you select Proof Colors. So the inverse mapping must also be known (with some gamut issues, but I'm not concerned with those, because, after all, I'm VIEWING it on a monitor anyway!). What I want is a plug-in that automatically applies that inverse mapping so that, when I do a Save For Web, I end up with the colors I've been viewing all the time when setting the shot up in print mode. Then, too, I don't have to worry about what mode I'm in when I'm editing -- it just fixes it when doing a save-for-web.
Again, I want to edit in my normal print mode (typically ProPhoto colorspace, and with soft-proofing off or set to the printer/medium combination I expect to use), then do a single operation (might be a multi-step action) to "screw up" my colors so that when I then do a "Save-For-Web", the resulting image, when viewed on the average color-stupid browser, looks like the image I've been seeing in Photoshop.
Anyone know of such a beast?   I would gladly pay for a plug-in that really works and fixes the problem.
And if you have other solutions, I'm interested, but the absolute requirement is that it I do one single edit pass for my colors for both print and web use, and I get what I see on the screen in PS on both the prints and on the web display (i.e., working in sRGB/Monitor RGB mode all the time won't cut it). And PREFERABLY, let me do all my editing work in the ProPhoto (or at least AdobeRGB) colorspace so I have a gamut closer to what the printer can do.
Anyone got a decent solution for this?

Sorry, I think I'm being unclear. This has nothing to do with individual monitor profiles. In Proof Setup, "Monitor RGB" amounts to turning off ALL color management, and simply letting the monitor do what it will. It is what the vast majority of web browsers do (even if the operating system provides color management, the browsers don't take advantage of it), so that is what you need to consider for images that will be viewed on a web browser. If you convert your image to sRGB, select Monitor RGB in Proof Set up, and turn on Proof Colors, you will see the image as it would appear on a web browser (after you save it as a jpg or use "Save For Web/Devices" to save it as a jpg).   Since almost everyone is running different uncalibrated monitors, there will be lots of variation in how it will look to them, so precise control of the color is unimportant.
That said, I would expect the color on a calibrated monitor (such as the one I use when editing) to be reasonably close to the colors I am seeing while editing in PS. To the extent a monitor deviates from "calibrated", those colors will vary, but a good monitor should show good colors.   Unfortunately, this is NOT the case, as my previous post shows. The colors produced by the steps above are oversaturated and significantly shifted in hue. There is, to my mind, anyway, no reason for this. Adobe clearly knows what the mapping is between the colors as it displays them in PS and the un-controlled "Monitor RGB" -- that is, it is the color map they are using during normal editing display. If they were to reverse-apply that map prior to saving it as a jpg, then the image would appear on a browser on that same (presumably calibrated) monitor very similar to what you set up when editing. Anyone else viewing the image on a web browser with a calibrated monitor would also see good colors. To the extent other viewers' monitors are out of calibration, their colors will suck, but there's nothing you can do about that.
I guess in some sense I AM "asking for a Color-Mamangement-solution for a "non-Color-Management-situation", but specifically I'm asking for PS Color Management to do the best it can for non-Color-Managed situations that we all face every day.
Does that make more sense?

Looking for a better solution to the "Save for web" color shift issue

Ok, everyone who has fussed much with photoshop and "Save For Web" knows about the color shift issue. If you want your colors to look right after you "save for web", you have to work in the sRGB colorspace, and have Proof Colors checked (soft proofing on) and the proof color setup set to Monitor RGB, otherwise what you get looks terrible when displayed in a browser.
But of course if you are editing for print, this is exactly what you DON'T want to do. Well, I work in both. In fact, often the same images, and I want them to appear as close as reasonably possible in both print and web formats, and without a lot of fussing on my part. And I'm pickiest about the print mode, since I have the most control there, so that's the way I want to edit by default.
Nothing new here.
Now comes the interesting part (in my mind, anyway). Obviously there is a known remapping -- because PhotoShop DOES it when you select Proof Colors. So the inverse mapping must also be known (with some gamut issues, but I'm not concerned with those, because, after all, I'm VIEWING it on a monitor anyway!). What I want is a plug-in that automatically applies that inverse mapping so that, when I do a Save For Web, I end up with the colors I've been viewing all the time when setting the shot up in print mode. Then, too, I don't have to worry about what mode I'm in when I'm editing -- it just fixes it when doing a save-for-web.
Again, I want to edit in my normal print mode (typically ProPhoto colorspace, and with soft-proofing off or set to the printer/medium combination I expect to use), then do a single operation (might be a multi-step action) to "screw up" my colors so that when I then do a "Save-For-Web", the resulting image, when viewed on the average color-stupid browser, looks like the image I've been seeing in Photoshop.
Anyone know of such a beast? I would gladly pay for a plug-in that really works and fixes the problem.
And if you have other solutions, I'm interested, but the absolute requirement is that it I do one single edit pass for my colors for both print and web use, and I get what I see on the screen in PS on both the prints and on the web display (i.e., working in sRGB/Monitor RGB mode all the time won't cut it). And PREFERABLY, let me do all my editing work in the ProPhoto (or at least AdobeRGB) colorspace so I have a gamut closer to what the printer can do.
Anyone got a decent solution for this?

Chris
I spent all day Googling and doing side by side comparisons of my old and new systems.
My display is a Dell U2410. It has several presets, including sRGB and Adobe RGB. I've been using sRGB.
On my OLD system, (Win XP, PsCS2, DwCS4) there seems to be no distinction between color managed and non color managed apps, even on this wide gamut display. I could capture (digital camera) in Adobe RGB, open and edit in PsCS2, save as .psd, convert to CMYK for print, or convert to sRGB for SFW. All images looked identical and they printed and displayed perfectly. I thought this was normal, and seemed logical. This also seems to be the source of my incorrect assumptions. I was trying to get my new machine to behave like my old one.
So I get this new machine (Windows 7, PsCS5, DwCS5) and now (still in sRGB display mode) all color managed apps appear de-saturated. Non color managed apps are OK. If I switch the display to Adobe RGB, color managed apps are OK, but non color managed apps are way too saturated. From my investigation, I believe this is normal behavior on a wide gamut display. I've tried changing the Control Panel > Display > Screen Resolution > Advanced settings > Color Management options, but to no avail. Either I'm missing something, or Windows 7 is doing color management differently.
It seems my only option now is to use Adobe RGB display setting for Ps, etc. and switch to sRGB for Dw and non color managed apps. Or, have 2 separate files for print and web. I've Googled 'til my eyes are numb and still not sure I'm getting this. Any enlightenment would be greatly appreciated.
Finally, I don't see an edit function here, so I can't remove my previous incorrect reply. Moderator, please feel free to do so.
Thanks

IBooks author color shift with "Save for web devices..."

Hi! I'm a web developer and I'm learning to use iBooks. It's a really easy tool, but there is a problem with color management wich is driving me crazy. This happen when I export images from "Save for web devices..." from Photoshop, then drag it to iBooks author.
As I do for web development, I do this:
1) Configure photoshop Color Settings to work with "Color Monitor"
2) Remove any color management from my document
3) Proof Setup > Monitor RGB
4) Disable Proof Colors
5) Use "Save for web devices..." with ICC profile and sRGB unchecked
The exported JPG looks fine everywhere... Photoshop, Preview, Safari, Chrome, FF... but looks washed out when I drag it to iBooks Author. Why?
I solved this issue converting to sRGBIEC61966-2.1 profile and checking ICC profile when "Save for web devices...", but I'm not confortable with this workaround because I'm not sure about what I'm doing exactly, and I am not sure if this images are gonna look good on any device (I only own an iPad 3).
Somebody know a best method to deal with this?
Thanks!

Hi KT. Thanks for your response. I'm already using this formats. Anyway, the problem occurs within iBooks Author interface. I mean: I can see the color shift (or washed out...) at iBooks Author at my computer screen. Of course, when I test it on iPad it also looks bad.
It's incredibly strange because the JPGs I'm using looks fine everywhere else except iBooks Author.

Color shift (lightening) when using "Save for Web & Devices..."

Can someone please let me know why I'm getting a color shift (the entire image lightens noticably) when I export an image or animated gif with "Save for Web & Devices...". It happens on PCs and Macs, and with both CS3 and CS2.
I've been using this feature (flawlessly until a few months ago) long enough to realize that there are several settings to adjust the color table, dithering, web snap, etc., but adjusting these settings don't seem to fix the problem. When I use "Save As..." the color shift doesn't occur, and that's been my workaround, but I'm currently trying to save a few animated gifs, which must be saved with "Save for Web & Devices..." in order to retain the animation.
Please help!! Many thanks.

Ah ha! I thought so. The only reason I can speak on this topic at all is because of what I was forced to learn when I started using a Dell LCD flatscreen.
As mentioned earlier, most monitors are pretty close to sRGB, which made web work somewhat easier. However, it seems recently some so-called "wide gamut" monitors have come to market, including the recent crop of Dells. The new Dells can produce a gamut that is closer to Adobe RGB than sRGB. This means -- speaking loosely -- it can produce brighter and more saturated colours than an "sRGB" type monitor.
RGB numbers, in the context of a defined colour space, represent an "actual" real life colour. A very bright red in sRGB colour space may be represented by r255b0g0, but that same "actual" red colour is represented in the wider Adobe RGB colour space by r219b0g0. Adobe RGB, being wider than sRGB, can include still brighter reds than sRGB's brightest red, hence where sRGB hits a roof at r255, Adobe RGB can keep going higher.
Imagine two ladders, each with ten steps on it. The Adobe RGB ladder is taller than the sRGB ladder, even though they both have ten steps. The 9th step is higher (i.e. brighter) on the Adobe RGB ladder than on the sRGB ladder. So if an image contains the RGB values of r219b0g0, well if you assign it to sRGB, it will not be a very bright red. If you assign it to Adobe RGB, it will be a brighter red, because that "ladder step" (like the 9th step) is higher than the same step in sRGB.
This is why your image appears brighter when viewed in SFW and in web browsers. Photoshop knows it's supposed to be using sRGB colour space, but SFW and web browsers DOESN'T, and so it just assigns your monitor colour space, which with these Dell monitors is wider than sRGB.
I think the Dell monitor is fine...I still highly recommend purchasing some type of hardware calibration utitily (one that has a thingy that attaches to the screen to measure the light being emitted). Properly calibrate and profile your monitor, trust what you see in Photoshop, convert to sRGB for web images, and forget the rest. Either way, your images will look "good" on some people's monitors and "bad" on others.

Color shift when using save for web

Hello,
I am converting my psd files to jpegs using "save for web". I am noticing that the colors are shifting from the original after saving for web. The color shift does not happen if I just convert the psd files to jpegs by using "save as". The psds have a profile of RGB1998. I am using CS3 and my monitor is color calibrated.
Do I need to convert the psd documents to sRGB first before I go to "save for web"?
The preview doesn't look any different if I check ICC profile in the save for web window. I have been told that you are not supposed to embed the ICC profile in the document when saving for web because most monitors are untagged.
Anyway I am wondering if I have to accept a color shift when saving for web or is there something I can do to get the saved for web jpegs to more closely match the original psd?
Thanks a lot for your help.

I think the reason why this question is asked often is because the FAQ entry is pretty lame and incomplete, especially for Mac users that by default have a color managed browser and by default have a screwed up rendering mechanism for untagged images.
Depending on your version of Photoshop, you can convert to sRGB before or during the Save for Web operation.
cesspool13 wrote:
...I have been told that you are not supposed to embed the ICC profile in the document when saving for web because most monitors are untagged.
You convert to sRGB for the systems that do not fully support color management.
and...
You include the sRGB ICC profile for the systems that do support color management.
Doing both covers your bum in most situations. You may choose to omit the ICC profile if you are working on common interface graphics that do not require strict color management. The ICC profile adds a few kilobytes to the file size that are not necessary on lesser graphic elements on a web page.

Batch processing "save for web" color shift problem

In Illustrator CS3, when batch processing "save for web and devices," there is a dramatic color shift in resulting files.
Is there a workaround for this problem?
Thanks!
Karen.

Make sure the color mode of your documents is RGB (not CMYK) and that your workspace is sRGB.

Save for web color shift - only on images smaller than 150x150px

I'm getting a color shift only on small images (150x150px or smaller) when I save for web in Photoshop CC and CS6. That's very weird as it doesn't happen to images larger than 150x150px! That issue happens with images with different measurements as well (e.g. rectangle), the small looks dull and the larger display the right color.
My Color Settings are set to "Monitor Color". Under save for web I have the following options not ticked: Embed Color Profile and Convert to sRGB. (viget.com/inspire/the-mysterious-save-for-web-color-shift)
I'm running the OS X 10.8.4 on a macbook pro, I tested that on both, Safari 6.0.5 and FF.
The squares in the screenshot were saved exatly the same way. The largerer displays the right color #FFCB32, but the smaller displays the color wrong.
I appreciate your help.
Cheers
P

JPG & PNG = Color Profile "Don't Color Manage this document". Save under save for web I have the following options not ticked: Embed Color Profile and Convert to sRGB. (viget.com/inspire/the-mysterious-save-for-web-color-shift)
Resizing in photoshop (Image Size), but the color shifts even with cropped image after save for web.

Save to Web Color Shift with sRGB Working Space

I'm having a problem a lot of other people have, which is the color shift when saving to web or viewing my work in a web browser.
The solutions I've found in the past have been to simply make sure my working color space in Photoshop is sRGB and that my files are being built with that profile as well. I'm under the impression that sRGB is essentially the same color space as is used in a web browser, and therefore my work should look identical in both Photoshop and a web browser.
So why am I still getting a color shift? Everything in a browser appears darker and with more contrast, as though the colors have been pumped up a bit.
My monitor color has been calibrated with a Spyder 3 Pro and I'm using the profile it created for me as my OS X color profile. Thinking the shift may be related to my monitor profile, I tried switching to other profiles, but I still get a color shift in every single one.
Any ideas? Thanks!

sRGB based on capabilities and trends of development (circa late 1990s) for commodities CRT computers displays. sRGB per se has nothing to do with web browsers. The reason it has become associated with the web is the assumption that most web users are looking at content using a commodities CRT monitor using Microsoft Windows.
It should be obvious that the use of a standard of some kind for display is better than none if there is to be any trend towards predictability of image display. Today, in commodities computing, that standard is sRGB: neutral color where R=B=G, and a gray ramp and primaries typical of the electron gun and phosphors used in CRT displays perfected for use in color television. It just so happens that this coding is rather will suited to get good value out of a minimum numbers of bits for color representation (e.g, 8 bits per channel 24 bit color)
Web browsers in and of themselves don't have a color space. A few, such as Mac Safari, use the ICC color management capabilities of the system, and these display compensated color just like Photoshop does: if the image is tagged with an ICC profile, compensation will be applied in the browser window. But for the vast majority of computers and users, browser color is monitor color, and it's easier and most reliable for designers to just assume sRGB because it's the space that's the best approximation of the internet at large.
You work usually will not look identical in Photoshop and a web browser (assuming that the browser does not or cannot do color management) because Photoshop is always soft proofing the working space onto the display. It is this quality that leads you to see parity between photoshop and the web browser when you choose you monitor profile as the working space: the soft proof produces no compensation.
But while this fixes up your local experience it is -not- the solution because this projects your monitor characteristics into the image when you share it. For example, if your monitor has a lumpy non-linear tonal response and you correct image shadows or saturation for a certain look the image data will code your monitor response as well as your intentions for the image appearance. Others will see the combination of your correction for your monitor response mapped over their monitor response, in fact they will see an inversion of your monitor's response coded in the image, and to whatever extent your monitor deviates from the norm is the extent which at the very least others displays of the images you correct will deviate from your intentioned look.
The answer to your problem--and this may surprise you--is to tolerate and appreciate the difference in display between photoshop's rendition of color and your browsers. Photoshop is showing your image more truly--within certain significant local limits--in terms of your working space than your web browser. By choosing an appropriate working space, and for the web it should be sRGB, and by profiling your monitor as you have, you are ensuring your images are normalized to current standards for web presentation. Others may still see crap, but it's most likely their problem and if they don't want to do anything about it that's their problem, not yours.
There are a wide variety of reasons why a properly calibrated monitor will not match a working space which the soft proof cannot overcome. A monitor gamut larger than sRGB is not one of them. Photoshop will properly display sRGB data if the display profile properly characterizes the larger gamut display. This leads to questions about the effects of monitor quality on workflow. Maybe the most important of these is "How do I know my Spyder has properly calibrated my display!!!" But this is a topic for a whole 'nother thread.
Where I run into trouble is when trying to make visual color comparisons during web design between my photoshop website mockup and a published site. I get confused and try to make color picker style matches by eye rather than by the numbers because I forget my web browser is not color managed. Sometimes I forget how all the parts play together and get confused and disoriented, then I make compounding mistakes. Then I start blaming my tools. Pity me.

Color Shift - Save To Web - There really is an issue

Similar Messages

Maybe you are looking for