CS4 and MAC Users – Save for Web – Color Desaturation Problem – The Fix
Most people don’t know this, but the issues concerning photoshop’s save for web option only concerns MAC users. That’s right, and even though there has been so much controversy concerning how to fix this color distortion…or should I say washed out look…none seem to be right, or fix the problem. I will try to explain in detail why this happens and what can be done to fix it. It is important to know though, if you are having this problem, that it’s not photoshop’s fault. It really isn’t. When using photoshop’s color management, it is so important to use properly and understand the ins and outs for you to get it to work correctly; the way it was meant to work.
Ok with that said, I need to explain first a few fundamentals. On a windows based PC, monitors are set at 2.2 gamma, while MAC…(well up until Snow Leopard) is set to run at 1.8. If your not familiar with this concept, all it means is that colors viewed on a PC are deeper, and more saturated than on a MAC. To explain this better, if you go into your System Preferences and click Displays, then color, and choose calibrate, it will walk you through calibrating your machines monitor. For the sake of this exercise, make sure the expert mode check box is unchecked. As you go through the basic calibration settings you will come to a place where it allows you to choose the gamma setting. Most people here get confused because 2.2 shows as a television setting while 1.8 shows as the “standard for MAC computers”. If you look carefully though in fine print, it will show under the 2.2 setting that this setting is also used for PC based computers. Now…if you if you go back and forth between the two, and click them, you will see a difference. 1.8 is lighter, 2.2 is slightly darker. So now that you understand this setting, you need to know how Photoshop’s color management works.
Photoshop’s color management is actually pretty smart. Smarter than you might right now be thinking. It realizes that all sorts of people with various types of computers are viewing on the web. So what it does is (if your on a MAC), in it’s save for web option is exactly that, it save’s for the web…while keeping in mind the various monitors that might be viewing them. It finds the right gamma setting so that when the images are saved and uploaded, they won’t look too dark on our PC counterparts monitors. For example, if we were to take any image and save it based on how we see it on a calibrated 1.8 gamma monitor, it is already lighter on your machine, whether you realize this or not, than our pc based counterparts. So if we save that image, without any save for web function, while it will look the same for you, it will not look the same to the average PC user. It will look considerably darker, especially when using already dark colors, like deep grays and reds, or blues. So simply putting it, that’s why it looks lighter now, after saving it than before. It has to be, otherwise to the whole population of PC users (which there is a whole lot of), it will look too dark. Photoshop has found a way to cater to both users, by finding that “middle ground”. Yes, it may look a little washed out to us, BUT the good news is, it doesn’t have to!
There are a couple of really good ways to fix this. Of course one option would be to do what most people are doing in this situation, which is changing either their levels or saturation pre-save….unknowingly making the pictures look good to them and their monitor and forgetting the rest of the population and how they might be seeing them, which I’m assuming will not be good. Or, you can educate yourself on how and why this works like this and calibrate your own monitor to cater to the rest of the population. I choose the latter as even now in the new Snow Leopard, MAC users will also be moving to a 2.2 gamma, so it won’t be just a small portion you will be catering to. No longer will it be only PC users but now all the MAC users who upgrade will also be viewing in this gamma. So better to get a head start now, if you haven’t already.
There are a few ways to set your MAC up to view in the same way the rest of the world is likely viewing. There are a few more issues that come into play here. I wish it was as simple as a gamma setting but it’s not. That is just one fix in a handful, that when combined together will make your design world just that much better. I would recommend calibrating your monitor first. If you are a professional designer, a calibrated monitor is the best way to make sure you are designing in true color, rather than just in your monitor color that could be wrong. During that calibration, make sure your MAC monitor is calibrated using a 2.2 gamma, if it isn’t already, and that would be the first step.
Now after your monitor is correctly calibrated, by using spider or Huey, and set to 2.2 gamma, you need to understand how browsers interact with color profiles. Browsers and color profiles, for the most part don’t get along…well unless your using the correct one, and even then it can get a little tricky. The best way to save for the web is to save in sRGB IEC61966-2.1and DO NOT UNNECESSARILY EMBED THE COLOR PROFILE. If you’ve created your image in sRGB IEC61966-2.1 to begin with it will be read correctly by most current browsers. Embedding the color profile takes up unnecessary space in page loading times and too many browsers are still either completely un-color managed, meaning they throw out or ignore any embedded profile anyway, or already do such a good job of color managing that they aren’t necessary. Now, THIS DOES NOT MEAN YOU DO NOT NEED TO BE WORKING IN THE CORRECT COLOR SPACE FROM WITHIN PHOTOSHOP. You do, and you should ALWAYS be working in CS4’s default RGB color space when working on designs for the web. It is sRGB IEC61966-2.1. In photoshop go to Edit, then Color Settings, and make sure sRGB IEC61966-2.1 is listed under RGB, and make sure ALL 3 check boxes under conversion options is checked. This will give you a warning any time you bring an image with the wrong profile into photoshop and give you options on how to handle it. This is so important.
So the second step is understanding a litter deeper Photoshop’s color management. More specifically, understanding color profiles and knowing how and when to use them. This is so important. More important than people realize. Photoshop CS4’s default working space for the web is set to sRGB IEC61966-2.1. This is the default space you should ALWAYS be using when saving for the web. There are some forums and bloggers out there that I have seen that are recommending to remove the color profile and pre-darken their images, before saving for web. As we already discussed earlier, this is a BIG mistake! They are already pre-darkening their images, and now removing their profiles or worse yet, setting them into incorrect ones, is a recipe for disaster. And I’ll explain why. To sum it up in two words…Web browsers. Web browsers show color in different ways. There are some color managed web browsers like firefox, and windows firefox, there are some semi color managed browsers like safari and firefox (I will explain in a minute why firefox is in both categories), and non-color managed browsers. So what does this all mean? It means a lot. It means the difference on how your images will look across these platforms. So not only do we have a gamma inconsistency from MAC platform to Windows Platform, now we have a browser inconsistency on how each browser or application reads (or doesn’t read an embedded profile) in our images. This adds to the color inconsistency of our world.
When working with images in photoshop it’s important to understand how color profiles work, how to use them properly. I am not sure if the default settings for photoshop’s color settings is with the warning messages enabled or disabled. But you need to make sure they are enabled. To do this, go to Edit, Color Settings and make sure ALL 3 check boxes are checked under conversion options. This means that anytime you bring a file that is outside your current working spaces profile settings photoshop will pop up with a little box asking you what to do. When this happens there are a few ways to handle this. Some important things to remember when working with profiles are: always have the warning’s enabled, use assign to profile to assign a profile to an image that is not already tagged with one, and use convert to profile when you already know the source images profile.
Let me explain. Say you are working on a project that is for the web, your current workspace is set to sRGB IEC61966-2.1, and you open another file in another photoshop window to edit it before bringing your final copy into photoshop…if photoshops window pops up telling you it is already tagged with another profile, ALWAYS keep that profile, at first in the pop up window, then convert it (EDIT, Convert to profile) from the source profile to your working space profile. If photoshop pops up with a warning saying it has no profile, ALWAYS leave it as is, never chose the assign to profile right away. When you tell photoshop to assign it without knowing the images source profile, your essentially telling photoshop it is, in that profile and should now make all conversions from that assumption…which could be wrong. So what you want to do is choose the leave it as is option then go to EDIT assign to profile, and try to find the closest color match of the image. Once you have the correct profile assigned, NOW you can convert it to your sRGB working space with no mis-conversions. IT IS ALWAYS BEST TO KNOW THE FILES SOURCE PROFILE BEFORE CONVERTING IT TO ANOTHER PROFILE. IF YOU DON’T YOU RISK ASSIGNING WRONG PROFILE INFORMATION TO THE IMAGE AND SKEWING ALL THE COLOR IN THAT IMAGE – AND HOW IT WILL BE READ BY WEB BROWSERS.
When people say they are removing photoshop’s color management by changing their color profile to monitor, what they are really doing is removing any information that can be read from the image to the browsers. This is not good. Color managed browsers, even semi – color managed browsers like safari and firefox read this profile information and use it to show the colors correctly (and the same) on all machines using color managed browsers. What that means is the first form of color consistency across the web. Without it, the browser assumes your image is already in sRGB IEC61966-2.1 (the web standard) and displays it, the colors become all skewed, because the colors you were viewing from your monitor could be totally off from the colors that is in an sRGB profile. It really has no foundation. Think of sRGB as the foundation for your web color. It will keep your colors consistent when profiles are removed in non color managed browsers, (because you created it in sRGB- so you will have used the correct color choices while creating it, and the browser will put it in sRGB anyway and hence won’t get skewed, or a fully color managed browser like firefox will go one step further and convert it to the viewing persons monitor color (based on their monitors current calibration) and take that profile info and just like photoshop, know how to convert it properly based on the sRGB profile it is reading.
So how your photoshop documents should be set-up when working in the web is….sRGB IEC61966-2.1 as the working profile (with warning’s enabled), your proof set-up set to sRGB IEC61966-2.1, and then in save for web and devices you would uncheck embed profile, check convert to sRGB, and preview in monitor color. The reason for all of this is you are working in sRGB, already explained, but you will have your proof set to sRGB (this will enable you to pick the correct colors based on that color profile). You can even switch back and forth in proof mode, from sRGB to Monitor if you want to see what it will look like when you save for web… When you switch back and forth from monitor to sRGB you will see any differences in your monitors color from the actual sRGB. Photoshop is smart. Remember me telling you that? because it knows your calibration settings and sRGB settings it can faithfully convert from one to the other…what it will look like correctly in both. And you can check your document colors this way to make sure they are correct. If while you are working, you are set in sRGB proof mode and you go to save for web and devices you are going to see a difference in your web pictures here also, if your monitor proof and sRGB proof don’t completely match up. sRGB proof color is the color that would be viewed on a completely 100% accurately calibrated color monitor..which 99% of the population doesn’t have. Just as your color is a little bit “off” after the save, so it will be for others, but only to the extent their monitor’s calibration is off. When keeping it always in sRGB, it will ensure the least amount of color discrepancy.
Now for the best part. Remember I was saying firefox is one of the best color managers out there. Well it truly is. And safari and many other browsers are not too far behind…not to mention windows based PC’s already have this type of color management built in, and this is even more reason to make sure you are following the sRGB rules I mentioned above. Firefox’s default color management is set to 2, making it only half color managed. When you set firefox’s color management to 1 or full, you are able to take advantage of what a lot of people are missing. I hope firefox will make this their default in the future, it is groundbreaking really. With firefox’s color management in setting 1 (full color management) firefox is capable of converting colors like photoshop. So for example, if we upload an image (that was created in sRGB and has that color profile embedded), it will read that profile and now because it knows the profile, will literally convert it to the viewing persons monitor colors, so that they can view the correct colors based on their monitor color calibration. Now, I know i said earlier not to embed the profile. And for right now I am sticking with that, until more browsers become more color managed (which I suspect will take some time). Very few people know how to get firefox to fully color manage, and most people don’t care to either, so what’s the point if I’m viewing better than my viewers. This does not help me to see what they are seeing it just helps me see what should be. For those of you that want to try it, here is a little test you can perform for your self to see what I am taking about. Open any image in sRGB mode on your computer, save it for web and embed the color profile. Then upload it to the web, to some place like photobucket…then (In firefox 3.6 and above) type in “about:config” in the browser address bar. A window will pop up with a warning, click “I’ll be careful I promise”, and in the filter section at the very top of the page, type in “gfx.color”. This will bring up a list of 3 gfx color modes, double click on the “gfx.color_management.mode”, and change the number to a 1. That’s it. Now go back to the photobucket page of the image you just viewed and see it’s new color. The reason why this is happening is because firefox successfully read the profile attached to that image then converted it to your monitor color space, so that you can view it better. The only problem with this, is that monitors that are very uncalibrated, since the image is being converted to these colors, may show up poorly. That is the blessing of sRGB, and why we need it. And why everyone should be using it when designing for the web.
So right now, if you follow my advice and try to understand what I am saying you will be on your way to understanding and fixing any color woes you may have.