Color Shifts on the World Wide Web www:
PhotoShop ® "Save for Web" ImageReady ®
In my lay style for lay Mac users (like me)
© 2003 www.gballard.net
Main Site

Why color changes when Save for Web, ImageReady, and or the internet?
The bad color issues generally falls into FOUR PROBLEM AREAS:

1) Photoshop CS3 CS2 PS 10 9 8 7 Working RGB is different from sRGB–type ColorSpace.

THE REASON IS:
Over 90 percent of web browsers strip embedded color profiles, and they apply a Monitor-type RGB to all web color.

The color shift or color change with Adobe RGB (1998) for example: 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.

Tips: Never put Adobe RGB (1998) aRGB on the internet.

Also, if on a Mac, see Mac monitor 1.8 gamma reason #2 below for more on monitor gamma mismatch.

How to fix color problems using sRGB and 2.2 Monitor Gamma:

  • Photoshop CS2, CS3> 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 degrees Kelvin D65.
  • If you are on a Mac, I highly recommend you re-calibrate your monitor to 2.2 monitor gamma, D65 6500.
  • SEE apple.com article: "Color and gamma settings for print and web."


HERE is a look at the new SFW Save For Web Devices settings in Photoshop 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.
2) The Monitor RGB or source document is in Apple 1.8 "Mac" monitor gamma colorspace.

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.

THE SHORT ANSWER for fixing web color shifts on a Mac:
The fix is to "calibrate" the Mac to 2.2 monitor gamma Get A Good Screen (and set the document RGB to 2.2 gamma color space like sRGB). Also read apple.com article: "Color and gamma settings for print and web".
NOTE: 1.8 "Mac" gamma is a shifty proposition in a 2.2 gamma Microsoft Windows PC world...see Side Rant below:

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):

Graphic

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:

  1. Most cameras capture in sRGB or have a sRGB option.
  2. Most scanners have a sRGB scanning option.
  3. sRGB is arguably the target ColorSpace of the WWW.
  4. sRGB is the default ColorSpace for Windows.
  5. sRGB appears washed out when viewed under Mac 1.8 default gamma.
  6. 1.8 Mac gamma appears dark when viewed under sRGB, 2.2 gamma.
  7. 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).

+++++

ColorSync understanding Apple's ColorSync Color Management System CMS CMM for info about how ColorSync affects web browsers.

###

by: ©2004 G. BALLARD • www.gballard.net
Note: G. BALLARD prefers a shredding if he is wrong or unclear.

    Please read the www.gballard.net site USER AGREEMENT, and site DISCLAIMER for legal issues regarding your use of the www.gballard.net site.

    G. Ballard, www.gballard.net, receives no compensation from, and is not affiliated with Adobe Systems, Inc., or Bruce Fraser or his associates or their many commercial enterprises.

Terms of UsePrivacy StatementSite Map
Home
About UsMission StatementPress KitContact Us