WEB BROWSER COLOR MANAGEMENT TUTORIAL

This demonstration requires a color-managed web browser
like SAFARI for Windows XP Vista Professional and Mac OS X FireFox 3.

The initial JPEG photos are all tagged with embedded profiles.

The lower roll-over calibration pictures in this left column show the exact same photo paired without its embedded ICC profile.

These differences are noted on each individual digital image.

The theory is:
COLOR-MANAGED BROWSERS will HONOR the embedded ICC profiles and display all three tagged files the same (corrected through the computer's monitor profile).

UNMANAGED BROWSERS will show all three tagged photos differently and each Tagged-Untagged pair the same.
(Think about this if you don't quite understand it yet...).

These color examples are created to effectively troubleshoot the color differences between web browsers like Internet Explorer IE, Safari, FireFox, Opera, OmniWeb, Camino, including operating systems like Mac OS-X, Windows Vista and XP.

###

This on-line demonstration and troubleshooting guide in a color managed web browser is a simple and clear explanation to learn technical information about why how digital color management works — it may be worth your time now to find and load a color-managed browser and study this color evaluation tutorial until my basic points are fully understood.

###

Normal (AdobeRGB) - Over (sRGB) - Click (AppleRGB)

Above, all three tagged files are in one box to evaluate them together.

In a color-managed browser, you should see virtually no color change when holding your cursor over the image, clicking on it, and moving off it.

In a non-managed browser, all three above tagged files (normal/over/click) will display very differently.

###

WHY IS COLOR MANAGEMENT IMPORTANT?

This simple tutorial perfectly illustrates the problems the "geniuses," printers and dumb applications have because, when they ignore our embedded profile, the Color Management System CMS CMM is forced to make an ASSUMPTION about the Source File.

If that Assumption is wrong, the Operating System, Printer and/or Application shifts the color -- hosing all Conversions -- exactly in the same manner as seen here (if the profile is ignored-stripped and it does not match the workflow's default or target color space).

Here is a very dramatic example of color management in action, and clearly shows what happens outside of color-managed workflows when ICC profiles are ignored:

Test image courtesy of CARL J. STAWICKI.

The above "Tagged WhackedRGB" example also will clearly show if your web browser is colormanaged or not — both Tagged and Untagged files are identical except the top image has an embedded ICC profile — the rollover is in essence stripping the profile.

CLASSIC EXAMPLE:

The classic real-world example is the old-school print shop's clueless "color expert" who ignores our embedded profile, because he says, he has turned "color management off" and "doesn't use profiles." He tells us our file is bad because his print is bad, and he will try to correct our bad color and print another round of proofs.

Does this sound familiar?

What the cave man actually did was strip our embedded file of its profile, and/or he Applied-Assumed-Assigned his own working space to our file — then he takes a sledgehammer and beats our color up into his closed workflow (and he is probably working on an uncalibrated monitor to boot).

THE SIMPLE TRUTH BEHIND COLOR MANAGEMENT:

If our monitor is profiled correctly, and our RGB .tif .jpg is tagged with an embedded profile, Safari, iPhoto, Preview and Photoshop will display it correctly, and it will print correctly as long as the printer Honors the source embedded profile and Converts it to a good target printer profile.

Everything else the "color expert" blames on our "bad file" is nonsense (except if the file has over-saturated, out-of-gamut colors or tones that the printer inks technology can't reproduce on the chosen paper).

###

CORRECT CALIBRATED MONITOR COLOR:

If your monitor is properly calibrated and profiled (how to), Safari should display tagged files with natural and healthy looking skin tones on the young girl and baby faces, and neutral stepped gray bars wedges.

Here is another monitor test page to further evaluate monitor quality and neutrality, including monitor density, black & white points.

Monitor Proofing Tips:

Try dragging your .tif .jpg .gif .png file icon directly into an open Safari window. Safari should open the file and display its color correctly either by automatically Honoring the embedded profile, or by automatically Assuming-Applying-Assigning Monitor RGB to the untagged file. There

There are some known color issues with transparent .png color gamma shifting bugs, including placing .png files in web authoring programs like GoLive, Dreamweaver, Flash, Fireworks, iLife, iWeb, and movie slideshow multimedia apps like DVD Studio Pro, Final Cut Pro, Final Cut Studio, iMovie HD, iDVD, Premier, After Effects, Lightroom, Aperture. Do a Google search for most current information....

### ### ###

Other free G. BALLARD articles
on Photoshop Color Management:

BASIC CORE THEORY on Photoshop® COLOR MANAGEMENT

WHAT IS ColorSync?
A Simple Explanation — The Short Answer
info about how Apple's ColorSync CMM works

HONOR-ASSIGN-ASSUME-CONVERT PROFILE Photoshop color tutorial
Learn HOW Photoshop actually handles color profiles, color spaces

COLOR SHIFTS ON WEB (How to Fix it)

16-BIT COLOR WORKFLOW Adobe® Photoshop®
CAPTURE as much info as possible & PRESERVE that info throughout the editing process by using Photoshop ADJUSTMENT LAYERS

TURN COLOR MANAGEMENT ON &
Honor My Embedded Profile, Please
YOU CANNOT TURN PHOTOSHOP COLOR MANAGEMENT OFF!

How to Make Monitor Match Print Printing Tutorial
Photoshop professional NO COLOR ADJUSTMENT printing workflow
for Epson ink-jet printers, but will port over to other top printer utilities like
HP, Lexmark, Canon inkjet printers, including CMYK.

### ### ###

Monitor Calibration Photos © Photodisc/Getty
Pretty young girls photo cute baby pictures baby faces PDI target
reference images were altered by G. BALLARD for this tutorial.
The calibration pictures used in this tutorial, including high resolution images
files for calibrated printing tutorial may be DOWNLOADED including the original
Photodisc Photodisk image and license.

Safari® ColorSync® are registered trademarks of Apple Computers, Inc.

Photoshop® is a registered trademark of Adobe Systems, Inc.

www.gballard.net
Writing and web page by GARY G. BALLARD
Please read the www.gballard.net site USER AGREEMENT and
DISCLAIMER for legal issues regarding your use of
the www.gballard.net website.

### ### ###
### ### ###
### ### ###

These other four test pages contain Untagged JPEG files
and a profile embedded in their PAGES, as noted:
NO Profile | sRGB Profile | AdobeRGB Profile | AppleRGB Profile

I wanted to setup test pages to see if embedding ICC Profiles in web pages worked -- it didn't -- but this Embedded Page Profile series got very confusing to write my points.
(I wrote it for professional use, for what it may be worth to you when embedding ICC profiles in web pages becomes usable.)

Terms of Use • Privacy Statement • Site Map
Home • About Us • Mission Statement • Press Kit • Contact Us

ABOVE IMAGE
is optimized
full color gamut
perfect saturation
best corrected color
properly set black point
proper set white point
proper gray balance
PC native gamma
in tagged sRGB.

- Notice the neutrality
and distinct steps in
the gray bar. -

Above ROLLOVER
SIMULATES
bad monitor calibration
and/or a bad file
clipping colors
clipped histogram
clip blacks whites
over saturated RGB
color cast color
color tints
green magenta red
blue yellow
white point
posterized colors
global bad color.

BAD MONITOR PROFILES
can also cause
good files - these files
to display in
Black & White sepia
with no color or in
weird neon colors.

###

PROFESSIONAL
COLOR PORTFOLIO
Large on-line gallery
of pow-wow photos
professionally
photographed
optimized
designed & published
by G. BALLARD.

Opens the Heart &
Soul of Digital Color
in lay terms.

These 100-plus
beautiful pictures
high resolution photos
represent
great examples of
the epitome of
professional workflow
state-of-art
how to capture
how to optimize
how to convert
digital color for
the internet.

The powwow series is
Un Tagged sRGB
color space
and should appear
with some of the
best color on internet
on your accurate
calibrated monitor
to enjoy.

Tagged Adobe RGB (1998)
(Hold mouse over photo to rollover Untagged version.)

The color-managed browser (or application) HONORS the embedded ICC profile and PROOFS or displays it correctly by Converting, correcting or mapping it to the monitor profile.

The rollover untags-strips the profile from the image, and forces the color management system (CMS) ColorSync to Assign-Assume-Apply the monitor profile to the untagged image, altering its true color.

Unmanaged internet browsers, including unmanaged applications and unmanaged printing work flows, work on the exact same principle as demonstrated in the untagged rollovers.

Blind to embedded profiles, unmanaged applications will always Apply-Assign-Assume some default profile to the photo or color graphic.

The AdobeRGB rollover illustrates WHY we should NOT put Adobe RGB (1998) on the internet: BECAUSE 90% of the world's browsers are not color managed and they will desaturate and washout Adobe RGB color as seen in the above rollover.

Moreover, AdobeRGB aRGB is one of the worst color spaces to use outside of color-managed applications like Adobe Photoshop...never set your monitor profile to Adobe RGB (1998).

A sure sign of an AdobeRGB color profile mismatch is the reds desaturate or get sucked out of the skintones as in the above rollover example.

DO NOT SEE A BIG SHIFT in the Adobe RGB rollover?

If the Adobe RGB rollover has the least amount of color shift (and you are on a Mac), you probably have one of the newer wide-gamut LCD flat screens, the so-called Adobe RGB monitors (which is okay in Photoshop, but terrible color on the internet using Mac browsers).

See the sRGB rollover below for the proof.

###

Tagged Apple RGB
(Hold mouse over photo to rollover Untagged version.)
The rollover is stripping the embedded profile and Assigning the monitor profile.

If your OS X monitor is profiled to 1.8 'Mac' gamma, there should be minimum or virtually no shift in the Untagged Apple RGB rollover.

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

###

Tagged sRGB IEC61966-2.1
(Hold mouse over photo to rollover Untagged version.)
Again, the rollover is effectively removing the ICC profile .icc .icm.
The two photos are identical except one is tagged with an embedded profile.

If your monitor is profiled to 2.2 gamma and 6500 degrees Kelvin, there should be minimum change in the Untagged sRGB rollover. Any JPEG color shift you do see on screen is the difference between your monitor profile and the sRGB IEC61966-2.1 color space.

If your internet browser defaults Applies Assumes or Assigns sRGB — like Windows Vista web browsers — you will see zero change in the sRGB roll over. If you do see even the slightest color shift here, then your browser is not defaulting to sRGB.

The sRGB rollover illustrates WHY we should publish sRGB color on the internet: BECAUSE over 95% of web monitors are based on 2.2 gamma (and will display the least amount of shift in the sRGB color rollover).

Further, sRGB workflow is the SAFEST COLOR SPACE to work in -- camera-and-scanner CAPTURE to monitor-and-printer PROOFING -- because sRGB closely resembles our monitor color space profile.

This means if our embedded sRGB profile is stripped or ignored, the dumb application (or dumb user) applies its default monitor profile (Mac) or sRGB profile (PC) to the file and proofs it the best because the two spaces are similar.

This is exactly what is happening in the above sRGB photos and it is how sRGB has been designed to work in digital imaging.

THE REAL WORLD

Obviously there is nothing we can do about all the computers in the real world that use bad monitor profiles on uncalibrated systems, but good 2.2 gamma, 6500/D65 monitors will display sRGB with the most faithful appearance with the best color, truest color possible.

These calibration and color theories perform the same on most of today's computers and displays, including Apple Macintosh Mac Pro, G4, G5 PowerPC, iMac, Mac Mini, iBook, Powerbook, MacBook Pro, including Intel Windows computers like Sony VAIO, Dell, EIZO, HP Compaq.

Plus the fact that modern LCD screens and video cards are a big improvement over older CRT and computer technology. The top best monitor manufacturers for color critical work are Sony, Apple, NEC, EIZO, Dell, HP Hewlett Packard, ViewSonic, LaCie, Samsung, Mitsubishi, Acer and Eizo flat screen wide gamut computer monitors.

Less experienced users simply load the OEM default monitor profile or download the monitor's generic profile by its model number, but this will not provide optimum color on screen because monitor hardware electronics are not that stable or consistent -- monitors need to be calibrated/profiled monthly to display accurate true color.

To get real professional color on our displays, we need proper calibration, hardware profiling solution, with custom monitor profiles to display real color properly.

Still, many of the newer LCD monitors look okay out of the box using its factory monitor profile, so consumers can simply plug and play a pretty picture without learning how to calibrate their monitor.

WIDE GAMUT LCD MONITORS ON MAC:

If you have one of the so-called "Adobe RGB" high-gamut panels, the above sRGB untagged rollover will probably have a big (cartoonish) intense color saturation shift on Mac browsers especially in the reds. I have completed (March 2008) troubleshooting my own wide-gamut EIZO ColorEdge NEC MultiSync Dell Ultrasharp monitors for the intense saturation problems on the internet.

###

If reading up or trouble shooting WHY color shifts de saturates washes out on the internet, in Photoshop Save for Web or ImageReady — here is the answer — also please read:
sRGB is the Correct Color Space for the Internet White Paper

The problem is an easy test in Adobe Photoshop SoftProof.
In Photoshop, after Converting to sRGB, go to:

Photoshop> View> Proof Setup> Monitor RGB
Photoshop> View> Proof Setup> Windows RGB
(There should be very little difference here
between Monitor RGB and Windows RGB.)

Any color differences between MonitorRGB and WindowsRGB in this Photoshop Soft Proofing is the difference between the monitor color space, Monitor RGB, and the sRGB colorspace -- exactly as shown above in the tagged-untagged sRGB photos paired above.

If this SoftProofing technique confirms where the wrong color or density shift occurs, the solution to fix and solve the color issues is to recalibrate and reprofile display monitor to 2.2 gamma, D65 6500 degrees Kelvin.

If there is still a blue shift, a bluish tint blueish tone to the photos, the actual monitor hardware is likely set to 9200 9300 degrees Kelvin. Likewise, a yellow cast would indicate the monitor itself is set to 5500 5000 Kelvin degrees. If the monitor has buttons, enter its menu and set its color temperature to 6500 to match its ICC profile to minimize any unwanted warm or cool tones.

If untagged AppleRGB and untagged sRGB both display incorrect color in Safari or FireFox, I would say you have a bad monitor profile or bad operating system, software bug or odd approach to monitor profiling.

###

EMBEDDING ICC PROFILES
in internet photos and graphics:

While Safari for Windows-based computers makes color-managed web browsers more common, this professional webmaster will continue to strip ICC profiles from 99 percent of the digital photos he publishes, mostly because adding color profiles increases file sizes, about 4K per photo.

Multiply that by the number of slices contained in the picture or how many web graphics are in a web page and the download size and time to load the page greatly increases.

I base my professional internet publishing workflows on facts 1) sRGB srgb.icc is arguably the default color space of the internet, and 2) sRGB (standard red green blue) is the target color space of the world wide web intranet.

###

ANOTHER PROBLEM
with Embedding ICC Profiles:

A real problem for web designers and color-managed Mac browsers is mixing tagged and untagged color where the graphic background needs to match or disappear into a filled box or page background color.

The above table is filled with AF641E color.
The logo backgrounds are filled with the exact same AF641E.
The tagged and untagged pixel-based graphics are identical except one has an embedded profile.

The problem here is no web browser reads ICC profiles embedded in web page code so all page color is unmanaged.

Apple's ColorSync® approach means 1) ColorSync Assigns-Applies-Assumes the monitor profile to the untagged page-box background fill color, 2) ColorSync reads the logo's embedded sRGB profile and then CONVERTS it to the monitor profile.

This means — on Mac OS-X Safari, for example — the Tagged JPEG file mismatches the Untagged page-box color surrounding it.

Compound this mismatching problem with the fact Apple defaults monitor profiles to 1.8 gamma, and web designers are faced with goofy complicated color theory and impossible target to hit.

However, notice the UnTagged logo blends properly under Mac Safari.

This is because both page color and logo graphic are untagged and having the same (wrong) profile applied: Monitor RGB.

Yes, the color matches in this untagged scenario, but the color is displaying wrong because ColorSync color management system CMS is applying its default monitor profile to the untagged sRGB color.

In fact, the Mac displays all untagged web color inaccurately because of Apple's inept approach to color on the internet...why the Apple geniuses choose to assume a unique custom monitor profile on the internet is beyond anything I can understand.

On the other side, Windows Vista operating system has a logical approach that treats untagged color as sRGB so the logo graphic blends and displays both tagged and untagged colors faithfully and as desired — a simple theory to understand and easy to target.

THE BOTTOM LINE ON EMBEDDING ICC PROFILES:

As seen in the above logo rollover, COLOR CONSISTENCY (not embedding profiles) can be much more important to some designers than COLOR ACCURACY (embedding profiles and using color-managed web browsers).

Still, Windows Vista users must wonder what all this ranting is about because Vista already matches untagged sRGB and tagged sRGB regardless of browser.

###