Why color changes when Save for Web, ImageReady, and or the internet?
Bad color problems generally fall into FOUR PROBLEM AREAS (this demonstration will make more sense if you use a color-managed web browser like Safari (free information and downloads for Mac OS-X and Windows Vista and XP). This color tutorial also recommends using Adobe Photoshop CS4 CS3 CS2 CS Ps11 Ps10 Ps9 Ps8 Ps7 Ps6.
#1 PHOTOSHOP Working RGB is different from sRGB–type ColorSpace.
THIS IS THE NUMBER ONE REASON why Photoshop color looks bad or shifts on the internet because:
- Over 90 percent of web browsers are not color managed and will strip-ignore embedded color profiles and color spaces as seen in the color changes in the lower untagged rollovers (using Safari browser and FireFox 3 or later with color-management enabled).
These "smart" (color-managed) broswers will read the embedded profiles and correct the color — but color-managed browsers also apply some default Monitor-type RGB profile to all un-tagged web color.
"Dumb" (un-managed) broswers apply some default Monitor-type RGB profile to all web color.
Windows Vista applies sRGB and Mac OS-X applies its Default monitor profile. I do not know what profile Windows XP defaults to, but it should be easy to determing by evaluating the lower rollovers in a color-managed web browser.
BEST Tips For Web Publishing:
NEVER put Adobe RGB (1998) aRGB on the internet — aRGB is one of the worst profiles or color spaces to use if you don't understand it.
ALWAYS CONVERT TO sRGB before Save for Web, ImageReady.
CALIBRATE AND PROFILE your monitor to 2.2 gamma D/65 6500.
AND NEVER set Photoshop's Working RGB to Monitor RGB.
Adobe RGB (1998) rollover:
Tagged Adobe RGB (1998)
(Hold mouse over photo to rollover Untagged version.)
If you are using a color-managed browser, you will see a big saturation shift in the rollover.
If you are using a non managed browser, both images will look exactly the same (desaturated).
If there is very little shift here on a Mac, you are probably using a WIDE GAMUT MONITOR.
The color shift or color change with Adobe RGB (1998) for example — as seen in the above rollover: The overall color looks unsaturated desaturated, especially reds, and washed out when Photoshop "Save for the Web" or "Jump To" or "Edit In" ImageReady, and/or when pictures are viewed on internet web browsers like Safari, Explorer, FireFox, OnmiWeb, Opera.
- THE REASON IS: AdobeRGB's unsaturated washed out appearance is the big color difference between AdobeRGB and the viewing monitor's ColorSpace. Outside of color-managed applications like Photoshop, the AdobeRGB is no longer being Converted into MonitorRGB gballard.net.
- Also, if on a Mac, see Mac monitor 1.8 gamma reason #2 below for more on monitor gamma mismatch.
For some reason, Apple defaults its monitor profiles to 1.8 gamma. Further, Apple has designed its ColorSync color management system to Default/Assign/Apply/Assume it monitor profiles. This really conflicts with web surfing because the web is based on sRGB, a 2.2 gamma monitor profile. This means if you are using a standard Apple monitor profile, 98% of your web color is being washed out.
#2 The Monitor RGB or source document is in Apple 1.8 "Mac" monitor gamma colorspace.
Apple RGB (1.8 gamma) rollover:
Tagged Apple RGB
(Hold mouse over photo to rollover Untagged version.)
If you are using a color-managed browser, you will see a big brightness shift in the rollover.
If you are using a non managed browser, both images will look exactly the same.
The internet and sRGB are based on "Window's" 2.2 monitor gamma — the shift here — the monitor brightness gamma shifts / changes when we "Save for the Web" or "Jump To" or "Edit In" ImageReady or when viewed on the internet browsers.
- • The reason is 2.2 gamma files (colorspaces like sRGB or AdobeRGB) display lighter on noncolor-managed 1.8 gamma "Mac" monitors.
- • Likewise, 1.8 Mac gamma files (colorspaces like AppleRGB or ColorMatchRGB) display darker on noncolor-managed 2.2 gamma monitors.
NOTE: 1.8 "Mac" gamma is a shifty proposition in a 2.2 gamma Microsoft Windows PC world...see Side Rant below (in blue box).
How to fix color problems using sRGB and 2.2 Monitor Gamma:
THE SHORT ANSWER for fixing web color shifts on a Mac is to 'calibrate' the Mac to 2.2 monitor gamma HOW TO CALIBRATE MAC MONITORS and HOW TO SET UP PHOTOSHOP COLOR SETTINGS.
- Photoshop CS2 and CS3, CS4> Edit> Convert To Profile: sRGB IEC61966-2.1 BEFORE Saving for the Web, or going to ImageReady, or posting photos or graphics on the world wide for web browsers. In CS1, PS7 and earlier: Image> Mode> Convert To Profile: sRGB IEC61966-2.1.
- NOTE: The monitor will also need to be calibrated-profiled to 2.2 gamma, 6500 Kelvin D65.
- If you are on a Mac, I highly recommend you re-calibrate your monitor to 2.2 monitor gamma, D65 6500.
- SEE MAC COLOR TUTORIAL for more information about Mas OSX color problems.
HERE is a look at the new SFW Save For Web Devices settings in Photoshop CS4 CS3.
CS3 changed how Photoshop 10 Save For Web works with ICC Profiles so be sure to understand how SFW works. ImageReady no longer exists in Adobe Creative Suite 3. In CS2 and earlier, we always need to manually Convert to sRGB before ImageReady or Saving For Web.
PROOF my point HERE in your color-managed web browser — a side-by-side comparison tutorial of tagged and untagged AppleRGB, sRGB, Adobe RGB (1998).
- NOTE: Apple's Safari web browser is a color-managed web browser for both Apple Mac OSX and Windows Vista and Windows XP operating systems. Read the color-management link for more information, including where to download Safari 3 for Microsoft Windows XP Vista Professional Basic Home platforms.
Photoshop can effectively "SoftProof" our web browser color:
- Photoshop: View> Proof SetUp> Windows RGB
- Photoshop's Soft Proof screen preview here simulates how unmanaged applications, web browsers, will display the file on 2.2 gamma monitors, based on the sRGB profile. If the file is based on sRGB and our monitor gamma is 2.2 and D/65 6500 degrees Kelvin, we should see very little shift here, which is the goal.
- Photoshop: View> Proof SetUp> Monitor RGB
- THIS IS WHERE the color-brightness-saturation problem will repeat consistantly.
- Soft Proofing Monitor RGB here strips-ignores the embedded ICC profile and Assigns-Assumes-Applies the Monitor profile or color space.
- The color and density changes seen here show the difference between the monitor profile and the source profile sRGB.
Side Rant:
sRGB is arguably the current target RGB ColorSpace for internet publishing because the world wide web is not color managed. sRGB (standard Red Green Blue) sRGB is a generic monitor-type profile that tells "average" 2.2 gamma monitors how to display color.
There will still be some error between unmanaged sRGB color and accurate calibrated 2.2 gamma monitors, but the difference will likely be acceptable negligible on screen because — unlike AdobeRGB — sRGB is a monitor-type, device-dependent profile.
What is Adobe RGB (1998)?
On the other hand, Adobe RGB (1998) is a specialized "high-gamut" device-independent ColorSpace for professional use in color-managed applications like Photoshop.
The AdobeRGB ColorSpace, ICC Profile, ColorSync Profile has nothing to do with monitors or printers. This is why Adobe RGB displays and prints so bad when the profile is ignored.
MY POINT:
Adobe RGB (aRGB) is unsuitable for use outside of color-managed applications, and aRGB is the worst popular colorspace to put on the internet.
|
#3 The monitor profile is bad — the shift here — anything can happen when other monitors display the color.
- The reason: The document color was balanced on an inaccurate monitor, bad Monitor RGB.
- The fix is to "calibrate" the monitor Get A Good Screen and correct the color.
- Color Only Looks Bad in Photoshop and other color-managed programs like Apple OS X iPhoto and Preview application.
#4 The Embedded Profile is ignored — the shift here — we see the difference between Photoshop's WorkingRGB, the file's actual SourceSpace, and the viewing MonitorRGB (when Photoshop Saves for Web, Jumps To or Edits In ImageReady).
+++++++
EMBEDDING ICC PROFILES in Creative Suite 3 CS3 Photoshop 10 PS10.
Adobe Photoshop Save For Web Devives "ICC PROFILE" option will embed ICC profiles in web images -- embedding profiles in web photos graphics is not recommended.
HERE is a look at the new SFW Save For Web Devices settings in Photoshop CS3 including SFW Tips Workflows.
Again, Photoshop 10 changed how Save For Web handles Conversions to sRGB so be sure to understand how CS3 has changed and how to prepare color files for the internet for the best possible color in web browsers.
+++++++
A Photoshop WorkFlow for the WWW:
Note: WorkingSpace> RGB: sRGB is NOT recommended for pre–press users.
Pre–press and print users should use a high–gamut WorkingSpace> RGB: like AdobeRGB.
Photoshop> ColorSettings (Command+Shift+K on Mac):
The above settings set Photoshop's WorkingRGB — the ColorSpace Photoshop embeds/tags — to sRGB IEC61966-2.1. For more information on these settings, and HOW changing them can break Photoshop, please see: Photoshop's Back Door.gballard.net.
Once we match the settings, Save with a unique name (so you'll know if someone alters it because the name will change to Custom) — simply (re)Load the correct Settings.
+++++
sRGB 2.2 gamma ColorSpace is recommended here as the WorkFlow Default/WorkingRGB because:
- Most cameras capture in sRGB or have a sRGB option.
- Most scanners have a sRGB scanning option.
- sRGB is arguably the target ColorSpace of the WWW.
- sRGB is the default ColorSpace for Windows.
- sRGB appears washed out when viewed under Mac 1.8 default gamma.
- 1.8 Mac gamma appears dark when viewed under sRGB, 2.2 gamma.
- Many printer utilities are based on sRGB.
Therefore, it is my opinion that setting RGB Default to 2.2 gamma sRGB ColorSpace — and "calibrating" a 2.2 gamma custom monitor profile — will serve more users better, with less confusion.
In any case, 1.8 Mac gamma is a shifty proposition in a 2.2 gamma PeeCee–Windoze world.
+++++
If your WorkingRGB is Adobe RGB (1998), like mine, or any other Color Space than sRGB, we need to: Photoshop> Image> Mode> Convert To: sRGB IEC61966-2.1 before Saving for The Web, or going to Image Ready, or putting the document on the web.
In other words, we Convert our device–independent, wide–gamut AdobeRGB file to the TargetRGB ColorSpace (sRGB).
