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?

Similar Messages

  • 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

  • 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.

  • 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 incorrect color shifting

    SFW (CS3) isn't functioning correctly, or perhaps I'm missing a pref or configuration.
    When I go to SFW, the image in the SFW window no matter what setting or level (even 100%) and resulting file is lighter, as in washed out, from it's PSD parent.
    Even viewing the Original from within SFW is not the at the original levels. It's washed out.
    As a test, if I do a Save As from the same PSD parent to a JPEG at 12, the file is the same level quality as it's PSD parent as expected/desired.
    As such, SFW is unusable for me.
    CS3, Mac Pro Quade Core 2x3GHz, OSX 10.5.5

    Thanks Ann. Here's what I have:
    In Edit > Color Settings:
    Working Spaces: RGB sRGB IEC...
    Color Mgmt Polices: Convert to Working RGB
    Convert to Profile:
    Source Space Profile: sRGB IEC..
    Conversion Options:
    Engine: Adobe ACE
    Intent: Perceptual
    Use Black Point Compensation (√)
    Use Dither (√)
    In SFW: Convert to sRGB is selected
    I'm looking at a head shot 72 dpi and the woman's face is lighter using these settings from within SFW looking at what SFW calls "Original" versus the real original outside of SFW.
    Saving a SFW jpg at 100% yields a lighter image than doing a Save As jpg at 12.
    I have both a HP LP3065 30" and Apple 22" Cinema display and the SFW processed file is lighter on both screens. Although the SFW Original is lighter on the HP than when looking at same on the Cinema. But the output is lighter and consistent viewing on both displays. Lighter than should be.
    The Cinema is set to Apple's stock "Apple Cinema Display" profile and HP doesn't support us with a Mac calibrator, but I did the best I could with Apple's - in Prefs > Display.
    Regardless, it seems that SFW is the problem (in my logical but limited color mgmt knowledge). I can save as a Save As jpg and get the expected color level consistent with the original on both my HP and Cinema. Isn't this the deciding factor? The consistency across both. Wouldn't that point to SFW being the problem, since Save As works correctly?
    And Peter, I totally agree with you, we need to search first. I did on "Save For Web Color Shifting" but didn't find it. I found other SFW issues, but somehow not my issue. Still, my apologies.
    Thanks to both.

  • Preview options in the "save for web" dialog

    According to the reference, the previews in the "save for web" dialog are there only for showing how the image can be seen on various platforms with different gamma values.
    But, if we open a non-sRGB image (ProPhoto for example) by the "save for web" option, the preview options (other than the "use document profile) in the "save for web" dialog assign sRGB color space to the image even when the "convert to sRGB" option is unchecked ... this causes unrealistic, dull previews for the image.
    What is the reason behind that PS assigns sRGB to the image previews if we uncheck "convert to sRGB" option?

    Basically, how animation works with GIF and Save for Web in PSE is that each layer in your document is a frame of animation. So you see one layer, then the next, and so on. You should not see the contents of the last frame/layer when looking at the current/next frame of the animation.
    Could you post a screen shot of your layers panel and give us a link to the GIF that is coming out of Save for Web?

  • Is the PNG generated by the "Save As" option the same as the png-24 from the "Save for Web" option?

    It would speed up my workflow if I could go through the save for web option rather than the save as. Are these files the same?

    No, SaveAs includes more metadata, while SaveForWeb makes the metadata optional.

  • CS5 save for web color change problem

    Hi Forum
    I've just started using PS CS5 on a new iMac, and I'm having some problems with save for web colors.  If I save an image (for example a shape with a solid color) then add it to a site I'm making then test in Safari, then take a screenshot with Grab, then open again in Photoshop, test the screenshot color with the eyedropper, the color value is slightly different to the original Photoshop file.
    Previously in CS3, I had the color settings RGB workspace set to Monitor RGB display, and view > proof setup > Monitor RGB.  Then when saving for web I made sure convert to sRGB was unchecked.  This always worked and would give me the exact same colors in the browser as Photoshop.
    I have tried the same settings now is CS5, plus a few other variations (like using view >proof setup > internet standard RGB) but it is just not working.
    Does anyone know the correct setup to save for web in CS5 and get the same original colors?
    I'm saving them as jpegs.
    I hope someone can help with this.  Thanks in advance

    I'm really confused about this now.  My display profile in OSX settings is set to iMac.  I have some specific questions:
    - What should my color settings be in Photoshop?
    - What should the proof setup be set to?
    - What color profile should my documents be set to?
    - What are the correct options to select when I save to web?
    I just want to able to save a jpeg image for web, and get the exact same colors as my original Photoshop file.  Please help!

  • Possible bug in Save for Web -- Color Changes!

    Hi,
    I'm new to CS3 and also new on the Mac (and also to thiis forum). So I might be overlooking something but I am an experienced user user of Photoshop 7 on a pc. Never had a problem like this.
    When I try to save an image with the color #c51076 as a gif using the Save for Web function I get a totally different color. Much lighter!!! I don't get it. I can't get the color I want.
    I jjustt found out that iit also messes up webcolors: it swaps one webolorr for another.
    Does anyone know a solution?
    Thanks!

    Thanks for sharing. First let me say I think it's really great that you have shared all the documentation about these color issues. I read your page before posting here, and I tried each of the suggested solutions, and wasn't able to fix it. Maybe it is a problem with the Mac OS and the way it displays images non-color managed images. But it's not like all the images I view on Firefox are dull-just the ones I've edited, because they appeared different in CS3.
    As I mentioned above, I am not the only one who is having this problem, despite trying all of the fixes suggested (see the link to forum thread posted above). I think my next step is to schlep my MacBook over to the Mac store and see if they can verify my monitor profile. But if anyone else has any suggestions, please let me know!
    Emily

  • Copy & paste into save for web color palette doesn't function on macs

    This didn't work in CS2 either on the mac side. Yet, you can copy a color hex code in the normal program, save for web and paste that color into the color picker for matte on a gif just fine on a PC. Get on a mac and you better get a pen out. Why?! Why can't I paste into the save for web/devices color picker?! Seriously? $600 and I can't copy and paste because I use a mac while at work on the PC I can do it without issue.

    Is this something that will be given to mac users in a future update?

  • Photoshop CS6: Save for Web Automatic Resize Issue

    Some my .psd files (CS6 Photoshop, MAC OSX 10.7.5, Processor: 2.5 GHz Intel Core i7) automatically resize to a percentage. I can't figure out what the cause is, and it will not allow me to change it back to 100% to slice out images for web.
    File Type is .psd - RGB 8 bit/color
    Fie Dimensions are 1400px by 10,800px.
    File Size is 60MB
    The file is extremely slow to open and adjust anything within the file as well, not sure if the issue is related.
    I am working off of my desktop not off of a server.
    Attached is the save for web issue.

    I have the exact same issue, just on certain files?
    I have to 'save as' instead of 'Save for Web'?
    What causes this to happen?? I also have the preview window displaying a gif when I've got the PNG option selected???

  • Save for Web Color Degradation

    Photoshop CS2 - I am doing a Save for Web and have ICC Profiles checked off and also the User Document Color Profile is checked off. However, when the image gets into the browser (or is previewed in GoLive or Dreamweaver) it loses color and actually looks like it does when Uncompensated Color is selected. Any ideas?

    Neil and/or Buko
    Some of the FAQs in bold red at the top of the main page are a little dated. Maybe some should be replaced with the "color looks washed-out when Save for Web" FAQ.

  • 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.

  • Why are the dimensions of my slice being reduced by 'Save for Web'?

    Hey
    When I create a slice and then select 'save for web' the selection i'm trying to save is reduced in size. Originally I only noticed this when I was finding the saved file in the folder, but I now I notice that in the preview of the save for web menu the size is smaller than the actual slice should be.
    Any ideas what could be causing this? I'm using the latest version of Photoshop CC. It doesn't seem to be happening on our PC, but on both the Macs we have tried we are getting the issue.
    Cheers

    None of my pictures that I uploaded into iPhoto are in my Finder under Pictures.  Should I copy and paste my folders from iPhoto into here, in case something happens to my iPhoto program (in addition to backing them up onto an external hard drive like I already do)?
    No, that's just wasting space.  A back up needs to be on a different disk.
    Your photos are within the iPhoto Library.

  • Why does the Fireworks save for web function give better results than in Photoshop?

    Having used the trial version of Fireworks, I have noticed that the save for web function gives greater compression and image quality than saving for web in Photoshop. Why is this?
    As Adobe are not continuing in developing Fireworks, does anyone know if will they will improve the save for web function in Photoshop to match the Fireworks version?
    Are there any third party companies who anyone can recommend who will process large volumes of images for web?
    Thanks

    One of my favourite topics ;-P
    First, the save for web function in Photoshop has not seen any real updates in a long time. In Fireworks PNG export allows for fully transparent optimized files with indexed 256 or less colours, which is impossible in the save for web function in Photohop. It is unsupported.
    This is one of the reasons why Fireworks does a much better job than Photoshop. Another reason is that Photoshop adds meta junk in its exported files, and this also increases the file size (and should be removed, because there are also a number of fields which include information about your setup).
    One other caveat is that Photoshop's save for web functions neither allows for a choice in chroma subsampling, and instead decides automatically below a certain quality threshold to degrade the colour sharpness quality. The user has no control over this. (Fireworks also limits the user this way.)
    One thing to be careful of: FW's jpg quality setting, and PS's quality settings are very different - a 50 in Photoshop is not the same 50 setting in Fireworks.
    For jpg optimization I generally use RIOT (free): http://luci.criosweb.ro/riot/
    (When you install, be careful NOT to install the extra junkware!)
    Fireworks cannot change the chroma subsampling to 4:2:0, which does degrade the quality a bit compared to RIOT and Photoshop in my experience. Photoshop adds useless meta information, even if the user tells it not to do that. RIOT allows you to remove that information, saving 6k. RIOT also offers an automatic mode that optimizes existing jpg images without degrading the quality further, and often saves 10k or more, depending on the images.
    Interestingly enough, in my tests exported Fireworks jpg images are always reduced in file size by RIOT, due to FW's jpg export limitations, without any image degradation.
    In my tests FW's jpg quality versus file size turns out to be the worst of all three. RIOT generally wins, or is at least on par with Photoshop.
    As for PNG export, Photoshop's save for web function is quite abysmal. No 256 colour full transparency export is possible, while Fireworks does support this.
    Having said that, there is a free alternative that leaves both Photoshop AND Fireworks in the dust: Color Quantizer. http://x128.ho.ua/color-quantizer.html
    CQ is an amazing little tool: with it anyone can create PNG files with full transparency and reduced to ANY number of colours! It means that a 512 colour PNG with full transparency is now very easy to do. On top of that, for more difficult images a simple quality mask brush tool allows the user to control and retain even small colour details in a PNG, while reducing the file size to an absolute minimum.
    CQ is one of the best kept secrets of a Web Developer's toolkit. And it is free!
    Both RIOT and Color Quantizer have a built-in batch mode. Both are available for WIndows. Not for Mac. If you are on a Mac, try imageOptim. Not nearly as good as RIOT and CQ, but quite passable.
    PS to be fair, the newest versions of Photoshop do allow for export of 8bit PNGs with full transparency through the use of its Generator functionality. But again, it cannot compete with CQ. And as far as I am aware, Generator cannot be used in Photoshop's batch processing (which, btw, is very slow! For simpler daily image processing tasks I have to do in batches, I prefer IrfanView, which is lightning fast! IrfanView).

Maybe you are looking for