Photoshop CS3 and Save for Web issues
I've recently begun using Photoshop CS3 and noticed that all of my saved 'Save for Web and Devices' jpgs were coming out differently than they looked in my workspace. I always disable colour management as I don't do any print work and I believe the simplest method for web development and design is to work in my monitor's colour working space. This was working fine in CS2 but for some reason my jpgs were looking different when I'd saved them. I discovered a setting in Save for Web and Devices that is on by default and converts the output to the sRGB profile before saving.
Below is a screenshot of my colour settings in Photoshop for reference.
Here is a screenshot of the offending setting, accessed from the menu that appears if you hit the small arrow button next to the presets drop down menu in 'Save for Web and Devices. In the screenshot my cursor is pointing to the menu button.
You need to deselect 'Convert to sRGB' to ensure your jpgs and other exports look the same as your non-colour managed workspace.
I use an Apple Macbook Pro for my work which has a different gamma to Windows connected monitors. To roughly see how my images will look on a PC I have set up my 'Proof Colors' to be 'Windows RGB'. You can do this by selecting View -> Proof Setup -> Windows RGB from the main Photoshop menu. Likewise I imagine this would be useful for Windows users wishing to see how their images will look like in a Mac environment.
Now I know there are reasons why people should use colour management in Photoshop but I believe for web design work it is simplest to disable it. Most web browsers aren't able to display images with embedded profiles so it seems a little pointless to me. I could of course be very wrong and if anyone thinks otherwise please leave a comment.
Note: These days I work with everything in Photoshop in sRGB colour space which is arguably the most common (Windows) colour space for the web. Please see my comments below for details. The above no longer really applies to my workflow but may still suit yours.
Note: Comments have now been disabled.
115 comments
Jump to comment form | comments rssComments
Greetings Tancredi, and thanks for the input.
I recently discovered the same “issue” and created a little page showcasing the differences should anyone not understand what you so honorably pointed out.
And yes, the solution is as you state. As to having the need for color management for other environments, to switch back and forth as the need arises is really not that big a hassle. Dealing with this discovery was a greater hassle indeed. :)
you can find the link for the “Save for Web Comparisons: PS CS3 vs. CS2” here: http://muse.cajebo.com/2007/05/30/i-had-an-opportunity-to-test-cs3-photo...
Again, thanks for your excellent post.
Thanks for the tip, I was having the same problem with my gifs - inconsistent colours in the outputted file despite colour management being off. It’s pretty bad form of Adobe to sneak that setting in there!
Thanks so much for posting this! You’re a lifesaver. I recently upgraded to CS3 and this little “feature” was driving me nuts! I got so used to using Save for Web in Photoshop CS and it worked perfectly, then I started using it in CS3 and all my web graphics were coming out way too dark!
Thanks again!
I read somewhere that Safari/Win maintains the colour profile stuff, so now I gots ta worry about it too. Boooo …
Anyway, thanks for the tip. Probably saved me some grief as I’m about to head into CS3 territory.
I tried your solution and i’m still having the same problem. I saved for web then re-opened the image and compared its color with the original. They are close but the color picker shows different hex codes. Any ideas to fix this?
I found a fix to my problem.
http://www.adobeforums.com/cgi-bin/webx/.3bc105eb
Thanks for the comments guys.
Sean, I’m surprised you were having trouble if you had disabled the colour management in Photoshop, but its cool you found a fix. I prefer not to convert anything and just have Photoshop display the exact colours I’m going to see in my web browser.
Johari, Safari on both platforms can display colour managed jpegs but its not widespread enough to be of much practical use, especially in page designs where pngs and gifs are mixed in with jpegs. It may be useful when displaying photos on web pages but of course only if everyone’s displays were properly calibrated and I can’t imagine many people doing that. So I think its still best to remove any colour profiles from web graphics.
Thank you so much for that post; I was going crazy trying to figure that out.
Thank you SO much! Quick google and I found out that I wasn’t actually crazy, and my images were not supposed to look like that!
Dang! I thought i did something that did this.. thank God it’s not my fault.. :D THX!!!
Man, this is great. I had the feeling there was no hope!
Thanks for a simple solution to a problem that was getting the best of me. Like so many others, I was feeling helpless, desperate, angry, and frustrated. I even considered using CS2 again.
thanks this helps, but I still have a similar problem when importing a layered photoshop file to flash CS3.
the color gets all messed up and there is no place to turn off the sRGB in the psd or in flash import wizard which probably uses the same export for web feature of photoshop.
I always have color management off for web design. I guess I have to use fireworks as a work around
Thank’s dude, I’ve been strugling with this for a long time.
Thanks man, this has been frustrating a few of us for a while and your post has helped solve the issue!
The solution is actualy the combination of this and the adobe’s post.
Even setting the right color space the Save for Web still delivered washed out images.
The solution is to tick the arrow on top of the save for web and select “use document color profile”
Works like a charm!
Thanks
Thanks, this thig was driving me nuts :P
Thanks a billion…it really helped reduced my stress headache for the day!
I’ll have to try that. I hated that issue when taking somebody else’s photoshop file with their colours and layers set up vibrant and the way they wanted it, then when saving for web everything go dull. You have to start in the right mode, but what about under “Color Settings” and the “North America Web Internet” option in Photoshop CS3. I think that would be something to try out.
You are a lifesaver!
Unfortunately, I have tried both suggestions here - and while it previews correctly in Photoshop now - it does not save correctly. I’m still getting washed out images! Help!
thank you, damn cs3
Man, you’ve saved my life! So simple.. Thank you!
I am not getting consistency at all with any of these suggestions and one thing I do know is that Monitor RGB should absolutely never be used as a working space. This whole thing really sucks and Adobe should do something about it. I cannot tell you all how upset I am with this. I am losing so much valuable time I could scream. It seems to me that “Save for Web” should either honor color profiles or display images as they will appear on the web with profiles removed. Adobe really blew it this time!
Peter, its my understanding that using Monitor RGB simply uses whatever colour space you monitor is set to, which is what you’d see online with web graphics. It basically turns off colour management. As long as you don’t have the ‘Convert to sRGB’ checked you should get output that when viewed in your browser, looks the same is it does in Photoshop. At least that is my experience.
Until each user sets up his monitor and colour profile properly and all web graphics are saved using appropriate colour profiles I don’t think there is much point in working in anything but your monitor’s unaltered colour space. At least you know that what you see is what you’ll get when you save the web graphic. Of course someone else will see something different due to the calibration of their monitor or gamma settings. There’s nothing you can do about this though.
Dude, this is one great topic.
Had many sleepless nights about this problem (who is so simple to correct…)
All my pictures turned out blueish, and could not find the solution.
Big THANKS!!!!!
I cannot express my graditude enough. I sorted the nightmare of colour fading in Save For Web a couple years ago- basically learning all about colour profiles and how to turn them off.
However, after recently performing a clean install of Leopard (seemed like a good idea at the time…) and setting up colour profiles to Monitor RGB etc. I couldn’t for the life of me figure out why my canvas in Photoshop was faded (with a blueish tinge) but when I saved for web the colours in the Original pane were correct (!?!) - but not in the Optimised pane.
Just simply putting a screenshot of your colour settings showed me the error of my ways: I had exactly the same settings as you - including the working profile of Monitor RGB - but the top pull down menu (labelled settings) was set to Custom instead of Monitor Color.
Muchos Gracias!!
Tancredi, what Proof Setup option do you work in when you’re typically working for the web? Macintosh RGB or Monitor RGB. Also, do working in these Proof Setup options affect the final web image from Save For Web?
Hi demonpixel, I don’t use soft-proof when working for the web, there doesn’t seem to be any point in proofing any colours as what I see on my screen as I design is exactly what I want to get in my output. Turning off all colour management options seems to be the way to go in my opinion.
Don’t forget that everyone’s monitors will output colours in a slightly different way and there is also a big difference in the gamma of Windows and OS X so web graphics will again look different. In my opinion there is no way to compensate or design for all these possibilities, so design with colour management off and at least you’ll get a result in your web browser that looks the same as your Photoshop design.
Thanks, changing the Proof Setup did the trick!
I use Photoshop CS2 and am having problems saving for the web. When I am in Photoshop and save the document for the web it looks great. The colors match perfectly. However, when I dump the image in Dreamweaver or into an email the reds turn orange and the blues get lighter. I have contacted NAPP help desk and they haven’t helped at all. Any suggestions…
From what I’ve read, you can’t turn color management off in Photoshop - it’s always on. More info here:
http://www.gballard.net/psd/saveforwebshift.html
http://www.gballard.net/psd/honormyembeddedprofile.html
Kyle, thanks for posting those links, I’m going to try to decipher that guy’s awful web site in the morning with fresh eyes.
Thank you so much,
I have been struggling with this for some time and new there must be a simple solution. Found you trough Google.
Thanks again
Dude……Thanks!
Really…….THANKS!!!
I am still having problems! I am using OS X 10.4, photoshop CS2, and both safari and firefox. I have converted the profile to sRGB and my color settings are sRGB as adobe’s website suggests. http://www.adobeforums.com/cgi-bin/webx/.3bc105eb I’ve also been using document color profile when saving for web.
The image is a png and I notice a slight color variation when in the save for web box. However, it looks crappy in safari and even worse in firefox!
I took a screen shot of the original and uploaded it straight to the website without fussing with photoshop. This one looks just like the save for web preview, almost normal!
I don’t understand what I’m doing wrong! Please help! It looks good enough under save for web but that doesn’t match safari or firefox!
Here are my examples: http://www.depaulca.org/images/colortest.png is a screenshot of everything, with photoshop on the left, safari in the middle, and firefox on the right; save for web is below (the top left photoshop is the correct image)
http://www.depaulca.org/images/test.png will show you the uploaded images saved from photoshop
Note: I was just playing with colors to show the differences in the test, so don’t hate on the composition!
Thank you!!
Kellen
Hi Kellen,
This could be down to the way png stores and uses gamma. I’ve noticed variations between browsers in displaying png graphics too. You could try stripping out the gamma settings from the png with something like pngcrusher or gammaslammer. You may also find this article interesting.
My personal opinion on all this is to remove all color space information and gamma correction from all graphics saved for the web and allow the user’s monitor to display them however it likes. At least this method will ensure what you see in your graphics package is what you see when you view your site.
Oh, dear … thank you, thank you, thank you!! This has been driving me insane for months! I’ve been posting scathing comments about this on Adobe’s Photoshop-related blog(s) ever since the CS3 beta was published, and even John Nack didn’t know why this was happening.
Lately, I had even gone so far as to use Photoshop CS3 in Windows XP for all my web work … weirdly enough, it doesn’t suffer from this idiotic pre-set “convert to sRGB” syndrome.
I can finally use CS3 on the Mac again … thank you very much!!
You should never ever use your monitor profile as your working space in Photoshop. This is monumentally bad advice. It may look good on your machine but will look terrible on every other computer as nobody else has your monitor profile. Even you will have problems in the future when you recalibrate your monitor profile or get a new monitor. Also monitor color spaces are usually not linear like for example Adobe RGB. Therefore, when you make a color adjustment to an image with a curve or any other color tool, you may be over or under compensating the adjustment because the tools are linear.
Hi there Buko, thanks for dropping by and contributing your comment, this is turning into an interesting discussion.
Do you have some advice as to how to achieve perfect colours while doing web design work? Bear in mind that the most used file formats for web, gif and jpeg, don’t hold colour profile information (actually jpeg can but only Safari can render it to the best of my knowledge).
What I’d like is for someone to explain in a step by step way how to set up Photoshop CS3 for web graphics so that what is seen in Photoshop is exactly what is seen in their browser on the same monitor.
In an ideal world everyone would have colour calibrated monitors, but they don’t. The average end user won’t have a clue about how to calibrate their monitor. So I think its pretty hard to know what colour will be displayed on someone else’s screen, especially as the browsers we use can’t handle the profile information. The best I can come up with in this scenario is to have my monitor displaying how I like it and design for that.
Again, I might be completely way off the mark, but I’m open to suggestion. So far no one has convinced me with a valid argument and solution.
Tancredi,
as you pointed out correctly, the “proper” way to create graphics () for web use is to cut out any kind of color management, anything else does *not work and will inevitably lead to disastrous results. The only additional step I (and many folks I know who work in this field) undertake is that I have a relatively elaborate hardware setup to check my designs before the respective sites go into production … my desktop machine (Mac Pro) has two monitors hooked up to it, one is a calibrated Apple Cinema Display on which I do all my initial work, and then a cheap-o flatscreen one commonly finds in Windows-centric home-/office environments.
Furthermore, I also have (solely for testing) a Windows-laptop as well as a cheap Windows desktop machine - this way I can cover the vast majority of my user environments from the get-go and adjust my UI-designs accordingly.
(* - with “web graphics” I am of course referring to interface elements such as branding elements, buttons, backgrounds, etc. … this is not to be confused with an attempt at accurately reproducing photographic elements online.)
Frank, thanks for your comment. Today I attempted to decipher G. Ballard’s site (great information - truly awful HTML), a collection of information on web graphics, Photoshop and colour profiles. I think I managed to grasp his point and am currently experimenting with using sRGB as my working colour space. I’ll attempt to explain why and how I’ve implemented it:
Most end users have an unmanaged colour monitor, 90% of whom use Windows and most of whom will be using Firefox or IE which doesn’t support colour profiles. So unless my target demographic for a given web site is 90% Mac users, I will assume most end users of that site will be using Windows with the Windows standard gamma of 2.2.
I design on a Mac which has the standard Mac gamma set at 1.8. So the first thing for me to do is to calibrate my monitor and set it at the more ‘average’ target gamma of 2.2. This helps me to see my graphics as other users on Windows machines do (not entirely but definitely closer). I run a dual monitor set up and my main display (DELL 24” 2407WFP-HC) has the 2.2 setting applied, while my 2nd screen, the Macbook Pro laptop display, is using the stock Apple setting of 1.8. This allow me to see the graphics in both gamma settings.
The next thing to change is getting Photoshop to work in the sRGB colour space. From what I understand sRGB is Window’s default colour space and therefore a combination of working in that colour space on a monitor that is calibrated to display in 2.2 gamma should yield images which fairly accurately represent what the end user will see on their default monitor in a Windows environment.
To see what the graphics will look like on a Mac monitor simply Soft Proof as ‘Mac RGB’. If your monitor is correctly set up with 2.2 gamma and you are working in the sRGB colour space, you should find that Soft Proofing as “Windows RGB’ will look no different.
When you output your files with the ‘Convert to sRGB’ setting checked in Save for Web, you should find that your graphics look exactly the same in your browser as they do in Photoshop. This is the desired effect but will only work if you are working in the sRGB space in Photoshop to start with. Otherwise the conversion will change the graphics. That is my understanding anyway.
So far my experiments have yielded good results and I’ll continue to try this method out on the next few jobs, testing on different hardware and monitors to see the final result.
In an ideal world everyone would have colour calibrated monitors, but they don’t. The average end user won’t have a clue about how to calibrate their monitor. So I think its pretty hard to know what colour will be displayed on someone else’s screen, especially as the browsers we use can’t handle the profile information.
You don’t have a clue what your images will look like on someone else’s computer. Since you have no control don’t worry about it. But your advice to use your monitor profile as a working space is not good. you really should remove it before beginners who don’t have a clue ruin their images because chances are they are not adjusting copies of their files but originals.
Photoshop uses the monitor profile to display the image that is in a known color space. Adobe RGB for example. so when I take my image to another computer with Photoshop or a color managed application like Safari the image will look the same on both computers. When you use your monitor profile as your working space it will look great on your computer and that’s all.
You may never have a perfect match when using save for web but then it doesn’t matter because of the reasons mentioned at the beginning of this post. Just like the early days of color TV when everyone had their TV set adjusted differently. I would find myself adjusting the color on them only to come back days later to find they had readjusted the sets to display over saturated green or orange faces.
What I do when working on web images.
Most of my images are in Adobe RGB, I do most of my work in this color space. My monitor is calibrated with an X-Rite EyeOne 2 every 2 weeks. When I save some thing for the web I make sure I have done all my editing and adjustments then save the file I’m working on. I never work on an original file. After saving the file I convert it to sRGB then I use Save for web. I use a compression of 20 in the SFW dialog. this high a compression changes the look a bit too but the images load fast and that’s what we want. Also keep in mind that gif only supports 256 colors so trying to get a perfect match with a gif is impossible.
Most of what I do is for print so I have to have my images look the same on the printing plants monitors As well as the finished product. I would not have any consistancy if I used my monitor profile as my working space.
You really should consider removing the bad advice you have given.
Think of it this way the monitor profile is the translator that Photoshop uses to display an image correctly that is in a known color space.
Buko, I’m not sure if you read the post above yours where I explained that I’m experimenting with sRGB working profile in Photoshop? From what I’ve read it is the best working space to be using as the output is most similar to what is seen in Photoshop. This makes a lot of sense to me as a web designer, more sense than completely stripping colour information.
Anyway, I will consider removing or amending my advice once I’m sure that this is really the best way of working. I understand that people working in print care a lot about colour profiles because of needing things to look the same printed as they do on the monitor. Most people working in the web world don’t care about profiles, all they want is consistency between what they see in Photoshop and what is in their browser. Also remember that 90% of what we do as web designers is created in Photoshop. All we want is consistency. Pretty simple really.
By the way, compressing JPGs at 20% isn’t a good idea either. Why don’t you vary the compression depending on the image, trying to achieve the best balance between compression and quality?
Keep in mind that there is no such thing as no color management. color management is always on even if you think you’ve turned it off. You would be better off using sRGB colorspace that is the closest to no profile.
You say people don’t care about profiles working on web images that will soon change as more browsers become colormanaged. Don’t sell your self short by doing it wrong.
Using a colorspace that only you have access to is a sure fire way not to have consistency.
AS far as the compression I use its perfect for what I do, pages load fast and I don’t have a fine art website.
Buko, I am using the sRGB colour space as I noted above a couple of times. Anyway, thanks for chiming in on this discussion, your views are most welcome. Anyone else with similar or differing views?
Thanks for this discussion! I didn’t know about the new “Convert to sRGB” option in CS3, and probably wouldn’t have noticed or thought about it for quite some time. Having said that, though, I’ll second the endorsement of sRGB when creating images for the web.
I have all of my monitors and laptops calibrated to 2.2 gamma, and Photoshop set up basically as G. Ballard describes on the site that you’ve linked to. For photographic and print work I usually use Adobe RGB as my working space, which I then convert to sRGB as a last step before exporting for the web (and I guess that the new SFW option makes that step a bit redundant). That gets me reasonably close to color consistency, at least on my end and for any users who have a calibrated display.
My question is about embedding color profiles in web images versus stripping them out: with Safari on the rise, Firefox 3 supporting color profiles, and the IE8 team hard at work (though no word yet about color), what’s the best practice?
Adam, I didn’t know Firefox 3 is supporting colour profiles, that is interesting.
I guess colour profiles are going to be great for jpeg images where the colour information is important, for instance on photographs and possibly for logos. Most of my sites make use of gifs for the visual elements as I find they generally offer the best file size and visual quality for smaller elements. I would switch to using pngs as they offer a slightly improved compression to gif but there is the issue of the gamma information in pngs making them look different from gifs and jpegs exported side by side. To the best of my knowledge gifs don’t support colour profiles.
Embedding the colour profile in a jpeg also increases the file size by around 4k so its not something I’d want to do unless its important to get the image looking consistent in every browser.
Does this make sense?
Hmm… it seems like colour management will be turned off by default in Firefox 3 which makes it a bit pointless as only those in the know will turn it on.
Thanks a lot for this tip. It was driving me insane, and a buddy of mine from work pointed out this entry. You rock.
I missed the part about profile support being off by default. I wonder if that’s just for the beta testing, or if it will stay off (and hidden where no one will ever see it under about:config). It was a nice idea, anyhow.
I agree that this is all pretty frustrating. GIFs are limited to 256 colors (and I think you’re right about their lack of profile support), PNGs have the gamma inconsistency problem, and JPEGs with profiles are larger and most browsers don’t care about the profile anyhow. When the artists you’re building a website for want to know why their 1.8 gamma, AdobeRGB-tagged photographs and videos (there’s an entirely separate can of worms) look really weird between Safari on the Mac and IE on the PC, though, you can at least explain the problem to them and try to help correct for it :)
I agree Adam, there doesn’t seem to be a lot we can do other than to design for our target audience and try to understand as much as we can about the differences in colour set ups so that we can explain to clients or designers if asked.
Hi there, I’m a french photographer who has just bought a mac book pro + CS3.
I just wanted to thank you all for the tips, I was turning crazy before I found you guys !! I had the same problem than Sean and thanks to his link, it’s now over… THANK YOU :)
Thanks for this tip,
I’am convert raw images with Aperture and open with CS3 save jpeg for web work now.,
THX
Neon.
So far none of the solutions has solved my problem with the color variation when working on a mac, i ve tried every color setting, and on save for web… but all my .png files slightly look a bit lighter/washed out, and do not match the hex color i use in my css document… so i ‘m stumped .. should i just work on a pc? b/c this is kicking my ass trying to design graphics when they will not match the existing hex.. someone anyone give me a solution
kc, you’ll need to strip the gamma out of your pngs. This is a known issue with png graphics. I made a comment about this further up the thread. Get something like pngcrusher or gammaslammer and strip the pngs of gamma information. This will make them behave the same as gifs saved from Photoshop.
ok and if i do that.. and part of it is transparent.. will it still work?
For sure dude, the gamma just controls the png’s brightness, the alpha (transparency) is a completely different matter and won’t be effected by stripping the gamma information. Give it a try and report back with the difference.
Does anyone know why I wouldn’t have the option to “Save for Web” at all? or the save as “PNG”? The .png is most important for me, but I’ve been using…..Photoshop 6….for years now (don’t laugh) and I don’t understand why I can’t save as a PNG. Can anyone help? Thanks in advance.
Daniel, let me just check, you are using Photoshop CS3? In the newer Photoshops there is a new menu item in the File menu called ‘Save for Web’ or ‘Save for Web & Devices’ in CS3. Using this menu item will take you to the optimise window where you can choose the file types, the kind of compression, amount of compression etc.
If you get stuck I strongly suggest using the help files which come with Photoshop, there are pretty good and will cover the question you are asking about.
Browser support won’t save the whole color-space issue as you more often than not have to align some sort of background color from the image to a CSS-specified color of an element.
Additionally the different gamma between Macs and PCs is quite painfull - is there a reason for that at all?
Agreed Jan, the browser support is only useful for times when you want to display a photographic image or an image where the colour representation needs to be accurate (skin tones etc). Even then it will only be displayed accurately on someone’s monitor if they’ve correctly calibrated it.
As for the different gamma values used by the different operating systems, I don’t know. I tried searching google and wikipedia but came up with nothing on the historical aspect of why these gamma values were chosen.
I set my main monitor (Dell 24”) to display the Windows gamma as I’ve decided that the sRGB space is the one to develop for seeing as the majority of web users are on Windows and Windows has the same gamma as the sRGB standard. I use my second monitor, my Macbook Pro’s, to see images in the Mac’s gamma and test them out before committing to web. I also use Photoshop’s ‘Proof Colours’ to view working designs in the Macintosh RGB space.
This gives me a fairly balanced view of what my images will look like on different monitors.
Live saver! CS3’s “Save for Web” settings were ‘killing me’, dark images indeed. - http://www.adobeforums.com/webx?233@@.3bc105eb!enclosure=.3bc105ec
Nice one! Cheers.
Thanks for posting that link Hamish, that was one setting I hadn’t noticed and setting the preview to ‘Use Document Color Profile’ has solved the last piece of the puzzle for me. Images now look consistent throughout my workflow in my sRGB working colour space.
So what’s the right thing for a mac web designer to do? I’m currently assuming that the Windows proof of my graphics is what 90+% of the world will see.
But colors still look washed out in browsers on my MacBook. I repeat, in the browsers. Photoshop proofs for Windows RGB and the SFW screen look fine.
Do I and others with Mac laptop screens just have to deal with this phenomenon? Anyone out there w/ a Cinema Display experiencing this, btw?
Thanks. This board has been great.
Eric, what you are seeing in the browser is what other Mac users will see in their browsers as long as you or they haven’t altered your monitor’s colour profile. The standard colour profile provided on Macs uses a different gamma than Windows based computers. This is a decision that Apple made a long time ago but I don’t know the reasoning behind it.
If you want your graphics to look the same on your Mac as they do in Windows you’ll need to adjust your monitor’s colour profile (or your laptop’s) to change the gamma. You can piece together the process based on the comments in this thread, but basically to do it right you’ll want to calibrate your monitor using a professional device.
Soon I’m going to try and post another article about this process and how to use the sRGB colour space as a working profile for web design work.
Thanks for the reply. Just for the record, I have set my gamma to 2.2, proper D65 white space. This thread is fantastic, btw.
Eric, can you explain a little more about your set up? I understand that you’ve set your monitor to the 2.2 gamma, the same as on Windows. Are you still seeing a large discrepancy between what you see in Photoshop and what you see in your browser? Still seeing ‘washed out’ colours?
Okay, I will join the long long list of posts about people tearing their hair out. I was one of them. Thank you so much for your post! I thought I’d played with every combination of setting, but alas, the little circle arrow thingy eluded me. You rock!
Thanks a ton man, this has been frustrating me ever since I upgraded- every image I tried to save for web kept getting way darker!
Well I see that you are still misleading people with your monumentally bad advice.
Hi Buko, nice to see you again. I'm sorry you are still upset about this advice. I haven't got round to updating anything and I'm still trying out some of your suggestions as well as other peoples. I've yet to find a 100% consistent way of displaying graphics on web pages. Please remember that the majority of people are interested in the following:
1. Creating images in Photoshop
2. Making sure that the images they create in Photoshop look exactly the same when viewed in their browser.
Until I'm totally sure of a method which does this then the advice above is fine. I mean, why are you so upset about this advice? What about it offends you?
Thanks you for informing about potentiol issue. I think CS2 is better then CS3 due to many reason.
Hi, I think this thread is great and am thankful I found it, I am a web designer and have CS3 but gave up with using it because of this situation and went back to using CS...until last night when I read through these posts and tried different combinations of settings late into the night. I am now confused about what exactly the various settings should be... I can't get to the point which many peple have where they are having good results. Does anyone have what the settings should be, in list format, without comments? I appreciate all the comments but am now completely confused and have tried what I think is every combination. Thanks!
i love you!
This was making me want to smash my mbp!
guys,
I encounter a "Could not complete the export command due to program error" message whenever i try to save for web in Photoshop CS3?
What could be the problem? i've ried re-installing, but it's of no use...
Sorry Sujan, I can't help you with that one I'm afraid. Probably best to contact Adobe support or ask in their forums.
First time reader, First Time commenter. Thank you so much Tancredi, I thought I would have to be stuck with dull coloured web pages.
the thing is, it looks like noone else than interface designers understand the concept of having correct hex color values in save for web output vs correct color information..
nice thread btw.
thanks,
t
Excellent information here! I first noticed color issues when using CS2 on my mac at work. It was pretty annoying for a while. I didn't seem to have any color issues with CS2 on PC at home. Just got CS3 on my PC and it was HORRIBLE! The Photoshop image looked so different from saving them for the web.
I was doing the changes as you recommended but didn't notice any change in my file. Then when I closed it and re-opened it, it was fixed. In case nobody has mentioned it, you have to re-open your files to see the new colorspace in effect (or at least I did).
They should have some sort of toggles at the top of the screen to allow quick switching from a basic web colorspace (or lack of colorspace) to custom print colorspaces. Then you can always see what one you're in.
I'm awful with color management so this guide was great. A life safer. Thanks!
Aaron
Excellent tutorial - got me out of a real hole finding this post, very helpful - Many thanks Tancredi!
Cheers,
John
This is slightly off the subject, is there a way to autosave in photoshop CS3. Thanks for your time.
Not to my knowledge Rod, but I wish there was. I just hit Apple + S every so often to save my work.
This is terrific information. Sure clears things up...
Thanks for sharing!
Andrew
If ANYONE could help me, I'd appreciate it it greatly. Images that I save using CS3 *STILL* are coming out faded, regardless of everything I've done:
I've calibrated my monitor (it's a Macbook Pro), making sure to set the Gamma to 2.2.
I've set my color setting in Photoshop to sRGB.
I've set the Save for Web save settings to "use Document Profile" according to this help topic:
http://www.adobeforums.com/cgi-bin/webx/.3bc105eb
I was THRILLED after I found the above help topic because it *finally* made my "Save for Web" preview images look just like the photoshop file in the preview window. I thought I'd fixed the problem...
.... except the images STILL look faded when they've been saved. Even though they look perfect in the preview window.
Is anyone else experiencing this problem? I'm using Photoshop CS3 on a Macbook Pro, running Leopard OS 10.5.2.
Hi Wendy, your setup sounds the same as what I'm currently running (Leopard, colour settings etc). The last piece of the puzzle for me was setting Photoshop's Proof setup to Monitor RGB (View -> Proof Setup -> Monitor RGB). This made my Photoshop images look like my saved for web final images and therefore exactly the same as my images in my web browsers. Make sure you turn on 'Proof Colors' in the View menu as well.
I'm still experimenting with this setup but it looks like its working consistently now. My main issue is remembering to hit proof colours (Apple + Y) each time I open or create a new document.
If anyone knows a better solution please post it here. I hope this helps you Wendy, please post a comment if this solves your issue as it may help other people too.
THAT did the trick... I can't even say how much I've agonized over this set-up since I got my new Macbook Pro & installed photoshop a week ago. Thank you very much for the help! :)
If it's not too much trouble. could you explain what exactly is happening here with the 'proof colors' option? I noticed the other two options were 'Macintosh RGB' and 'Windows RGB.' Selecting either of these options caused the colors on the screen to change noticeably.
I guess what I'm asking is, does selecting 'Monitor RGB' change the actual save settings, altering the actual image file that's getting saved? Or does it simply change how the Photoshop document APPEARS while Photoshop is open, with no change to the actual save settings?
Furthermore, would using the 'proof colors' option alter the way colors look on Mac or PC monitors, depending on what setting you used?
Once again, thank you for your advice; it was very helpful!
Wendy, as far as I understand it, if you want your images created in Photoshop to look exactly like your images saved for web, the idea is to keep the same colour settings throughout your workflow. This means ensuring that Photoshop is displaying your colours as your monitor is set up to do.
There seems to be two ways to do this, the first method is to set Photoshop's RGB colour management policy to 'Off'. This will force photoshop to maintain the colour (hex) values of imported or created images. This is what I first posted about at the top of the page. This method works great as long as you switch off convert to sRGB. Unfortunately this method strips out all colour profile information so if you receive files from other sources it'll look different on your calibrated monitor. Of course this may be what the provider of the file wants, he or she may get upset if you convert their Photoshop mockup and upload to the web only to have it look differently on their monitor because you've converted the colours. Its complex.
Method 2 is to try to maintain a colour management policy throughout the workflow. This is what you've set up. You are working in the sRGB workspace which will differ slightly from your calibrated monitor profile. You can switch your colour management policy to use the monitor profile but that is the same as switching off colour management. So the only way to see images in Photoshop as they are displayed in other non-colour managed applications on your computer (such as a web browser) is to have Photoshop proof your design using your monitor profile.
Photoshop is managing your document and maintaining a colour profile but is altering the actual colour values when importing files. It isn't altering the colour values of the file when you proof your design in Monitor RGB, or Mac RGB or Windows RGB, it is simply simulating what users may see when your design is viewed on those computers (or your monitor in the case of Monitor RGB). Macs and Windows have a different gamma setting so proofing can give you an idea of whether your images will look too dark or washed out on either machine.
When your workflow gets to actually saving your images in Save for Web you will be outputting them in their final state. This state depends on whether you are working in the sRGB profile, are converting to sRGB from another working profile or are not using any working profile (not colour managed). If you maintain the same sRGB profile throughout and proof as Monitor RGB you should find that your colours remain consistent throughout the process.
I hope I've explained myself properly and I'm also new to this so I could be mistaken and may have got some of the terminology wrong. I guess the upshot of this process and the reason behind working in a colour managed environment is to try to simulate the most common monitor profile, the sRGB profile. With the majority of our end users seeing our designs on a Windows box without any calibration, this profile is arguably the closest we can get to simulating that. There is still a huge range of differences in the way monitors display colours but I think this gives us the most balanced approach and allows us to have a guess at what our Mac and Windows brothers and sisters will see.
VA Loan, I definitely recommend the Macbook Pro, its a fantastic machine. There are hundreds of opinions about Mac vs PC but I prefer Mac. Its a personal choice. Photoshop operates the same on both operating systems so I suggest you have a go with a Macbook Pro and see if you like it.
Thanks a thousand times for the "save-for-web" tip!!!!
It's so stupid...
Thanks this really helped me I was slowly getting frustrated by this problem thanks for your help
Thank you so much for this. I spent hours trying to solve this and finally came across this which worked perfectly! Thanks for sharing it with everyone.
Actually it's working for most images, but for any of them with red the image doesn't come out as it should.
Tony, I'm not sure what you mean. Can you leave a bigger and more accurate description of the steps you've taken so I can try to recreate your issue. I just did a test with a 20px x 20px red square and it came out looking right and with exactly the right colour values too. Did you maybe save as png? png has gamma values saved by default, see some of the comments higher up this thread.
We had been trying to save images out with black background (111111) and it was converting to (040404) resulting in a visible black box. Just wanted to say thanks for the post - its people like you who bring some sanity to developers and designers all over the world just by sharing even the smallest of tips. Its things like this that can easily cost your an hour or two in the studio. Good work mate.
Very useful tip. Thanks for sharing.
Ok, I've been dealing with this "issue" for a few weeks now (or I only noticed it a few weeks ago) and I've been reading so much my eyes hurt. Seriously.
Now let me ask, if sRGB is the "base" color space for most web browsers (is that right? Or is that where I'm wrong to start?) then how is it that in PS (CS2, or CS3, or LR, or Safari I've seen no difference between them, they are all color managed applications) the sRGB image I see is LESS saturated than my Monitor RGB, or turn that around, how is it that it is MORE saturated in every other application than in PS. Shouldn't PS's sRGB color space be similar to a non-color managed software's display colors? As it is, say firefox, is displaying my images much closer to that of Adobe RGB, which is apparently the opposite problem everyone else is having....
Shouldn't what I see in any non-color managed software use sRGB as I see it in PS??
Can you tell I'm not "getting" this? I've been banging my head, pulling my hair... not a pretty sight.
That said, the reason behind all this is the following... I'm coming from the photography side of this issue, but I'm also trying to upload my images to the web to share with other photographers. So I can't NOT color manage, and I'm already using a purely sRGB workflow, from my camera to the save as jpg option (not even using save for web, so your post didn't help me, although I'm slowly getting a grasp on everything else), so whole workflow is sRGB. So there is no shifting, EXCEPT when I view any images outside of PS.
I think I'm repeating myself... anyone get all that?
Hi Andrée, I think you've misunderstood a little. The sRGB colour space is arguably the web's colour space because around 90% of web users are using a Windows operating system which uses the sRGB colour space by default. Part of the sRGB specification is setting the gamma to 2.2 (CRT gamma). This gamma setting on Windows computers is different to the gamma setting on Macs (which have a different colour profile by default).
When you view your images in non-colour managed software, like web browsers (including Safari unless the image is jpg and saved with colour profile intact) you'll be viewing the image in your monitor's colour space (sRGB by default on Windows). When you view your image in Photoshop with colour management turned on (default) the image may look slightly (or largely) different depending on your monitor's profile, the Photoshop working space and the colour profile stored in the file.
If you want your image to look the same in Photoshop as it does in non-managed applications you need to either strip colour profile data from the image in Photoshop and have Photoshop run in non-colour managed mode (see my post at the top of the page) or set up Photoshop to use your choice of colour profile as working space (I suggest sRGB for consistent web use) and then proof what you see as Monitor RGB (view->Proof Setup->Monitor RGB. Then View->Proof Colors).
If you choose to maintain colour information in Photoshop and are using sRGB as your working profile you may notice some difference in colours. This could be due to gamma settings or simply your monitor profile not being sRGB. To ensure you have wysiwyg you need to proof your Photoshop image in Monitor RGB then output it in sRGB. This should give you the correct output. At least it does for me. This is the only way I can get consistent colour and hang on to the profile data until I save it for web use, at which point it should look roughly the same on most computers (but not Macs). By the way, I use a Mac so I also proof my images on a Mac monitor and also simulate it in Photoshop to get a more balanced idea of what the web image will look like on different machines and monitors.
So the factors which will effect your colours will be:
From your post it looks like you are on the right track, but I suggest you look at your monitor's calibration. Also check that your PS working profile is sRGB. Set up your proof as Monitor RGB and then use Save for Web and see if the image looks different (washed out or too dark etc).
I suspect the difference you are seeing is the difference between your monitor's profile and Photoshop's 'pure' sRGB profile (Proofing colours gets around this). As a quick test I just set my monitor's profile to sRGB then viewed an image in Photoshop with and without proofing as monitor RGB and the colours didn't change. This shows that Photoshop will display your images differently if your monitor's colour profile is different from Photoshop's working profile (as it should). So make sure you proof your colours to see the final output unless your monitor profile is the same as your Photoshop working profile.
I hope this makes sense and helps. Please post your finding here to help other visitors.
Please note I'm no expert on this subject...
Thank you for the in depth summary Tancredi!
I think the only thing I'm not getting is WHY photoshop's "pure" sRGB, as you put it, would be different from either a calibrated or un-calibrated monitor. I mean, I do understand there would be a significant difference from one monitor to another, and also if my PS workspace color was set to Adobe RGB then I'd see a significant difference out of PS...
ok, let me think, PS uses Windows RGB (since I don't see a shift in proofing color, I'm assuming PS's sRGB and Windows sRGB are one in the same, on a PC that is), and Monitor sRGB would basically be what my image looks like uncalibrated?? Well, that doesn't make sense to me either...
The only thing I've come across that seems to be making sense for me is on my CRT monitor, if I set my hardware white point to 6500K, I see a huge difference when proofing my images from normal sRGB to Monitor RGB, if I set it back to my custom white point (before I had a calibration device) there isn't much of a shift at all between the sRGB workspace color and my Monitor RGB proof color. Now why would that be?
I'm trying out my husband's LCD screen at the moment and am running into similar, yet MUCH less distinguishable, problems.
Can a 4 year old CRT monitor already be exhibiting signs of "old" age?
I don't think any of this will help anyone, but I'm hoping someone stumbles across this and says, HEY! I had that problem and fixed it THIS way ;)
Andrée, I think that Windows sRGB profile is exactly the same as Photoshop's sRGB profile. I know it is on my Apple Macbook Pro. I can test this by switching my monitor profile (in System Preferences -> Displays -> Color) from Color LCD (Macbook Pro's default colour profile) to sRGB IEC61966-2.1. Then my images look identical in PS as they do outside of PS (as long as PS is using sRGB as working profile).
Because you have calibrated your screen you are no longer using the sRGB profile, you have created your own unique profile. Therefore the images will look different in PS (which is using the sRGB profile) than they do on your screen (which is using your unique profile). Does this make sense? This is where the difference is occurring.
If you want your images to look the same in PS as they do on your screen while still maintaining a colour profile you need to 'Proof Colors' as Monitor RGB in PS.
Tancredi! Thanks, that actually makes sense and I understand what another photographer was telling me she did with her monitor color. Now then, what is the point of calibrating and profiling? Isn't it to re-align the monitor's color to show them "right"? Wouldn't a calibrated monitor show the color the exact same as another calibrated monitor right next to it?
I need to figure out where I can switch it to see it for myself, you know, "hands on" learning and all that. I can sort of understand what you're saying, but it's still too fuzzy. So much so I can't quite formulate the remaining questions I have in my head.
thanks again, I'll be back, I need to find the PC equivalent to the profile switcher I saw around here somewhere :)
Very informative page. Thanks a lot.
Ahhh this little tip saved me quite a bit of frustration when dealing with skin tones on many of my photoshop projects that I work on for a skin care line. It seems that my monitors (higher resolution and more color than the average web surfer's) show a different color of skin, especially from PS to my screens, to say a 17" crt. The transition is sometimes not always graceful. I personally like many of the little features Adobe continues to add to PS, like the way windows can be dragged out of the program now (Very convenient). But one of my biggest gripes about the upgrades between versions are also the little things, like the sudden change of key commands. I remember when the move from PS6 to Y changed the ctrl+U command. Highly annoying.
zaaaaa4eeeeet! )
Thanks! This really helped!
Hey Tancredi, thanks for all the feedback and everything. I must have been doing something wrong after I got my first set of good results, or tinkered with it some more and undid what I did.
I recently saw this article: http://www.viget.com/inspire/the-mysterious-save-for-web-color-shift/ and I followed all the steps there and it's working perfectly. It's basically the same thing that you're advising.
Thanks again.
Tancredi,
I'm still having issues with Flash. I don't import the PSD because it's a joke, but I do save assets as PNG and import them into Flash. Much easier for me.
Here's the issue though. The PSD files I'm working with are using he Adobe RGB (1998) color profile. I have no choice but to use it. If I convert it to sRGB, the colors die. Also, Flash does not understand embedded color profiles, and it will simply assume that the file is sRGB. To get what I have in Adobe RGB (1998) to look proper in flash, I have to Save for Web as a JPEG, letting it convert it to sRGB. When I import the JPEG, it looks right!
But, when I Save For Web as PNG, converting it to sRGB, the colors are still flat when I import it into Flash. It looks right in the preview before saving, but it's clearly not doing what it does to JPEG. I'm not using color compensation for either of the files.
Is there no way to properly convert my Adobe RGB (1998) PSD file to an sRGB PNG file?
Hi David, I'm not sure how to solve that issue. Have you tried stripping the gamma information from the png? Remember that pngs hold gamma info which can make the png look a little washed out or different from a similarly saved jpeg. Search the comments of this post for links to programs which will strip this gamma data from pngs.
What does your png look like if you don't convert it to sRGB when you save for web? Does it look right when viewed in a web browser? Are you colour managing your Photoshop document and what is your working profile in Photoshop? If you proof your colours as Monitor colour, does your image look correct still?
There are a number of factors which may be affecting your image and its best to find out how you're working in Photoshop before diagnosing the problem. Post your settings and I'll try and help.
Thank you thank you thank you! What a silly setting to change by default. Saved us from downgrading...
Tancredi: What is your perception of this article? http://athleticsnyc.com/blog/entry/color-management-for-web-designers-an...
thanks man...i was facing this problem
This is going to sound really stupid, but i have somehow done something to Photoshop and my "save for web" cannot be selected!! does anyone know how I can fix this?
@James: That article is good, it explains colour management quite well. I'm not sure what he means when he is saying that CS3 converts to sRGB twice when saving for web. My workflow is slightly different from his as I use Proof Colors in Photoshop to see how images will look on my monitor when saved.
@Tiff: Sorry, I've never seen that issue before. Does it happen to all images? Try a reinstall if you get really stuck.
I used PC for many years and just recently purchased a Macbook Pro and a new monitor. With the PC I had everything working OK. My monitor is calibrated with the Huey Pantone Pro and is set t 2.2 Gamma. I am having trouble matching color with the “Save for Web & Devicesâ€. I never had this problem with my PC. I was not aware that Safari will see an ICC profile whereas most other browsers will not.
My workflow. I shoot in RAW and RGB, work in TIFF and convert to sRGB before using “Save for Web & Devicesâ€. In “Save for Web & Devices†the preview menu is set for Uncompensated Color. Using PC this worked fine. The image I sent always matched my original. I noticed with MAC it does not.
I sent 2 images to a website I frequent, one tagged and one not.
When I view the tagged image and set the Proof Setup to Windows RGB it matches.
When I view the untagged image on Windows RGB it does not match.
When I switch to Monitor RBG it matches the untagged image.
I’m not sure how this relates to how I see my image compared to how the rest of the world sees it. At this point I would think that if I do not want to tag my images and ensure everyone sees it the same way I do I should be working in Monitor RBG. Does this make sense? I did scour through Andrew Rodney’s “Color Management for Photographers†about this but could not find the answer.
thank you