EMBEDDING ICC PROFILES Basic Rules:

This color-management article discusses the pros and cons, why when how to embed ICC Profiles in web graphics and professional digital photos and graphics using Photoshop CS3 CS2 CS PS7 PS8 PS9 PS10 for web sites and internet web browsers, including extensive on-line tutorials that support this white paper opinion.

FIRST, I don't recommend embedding ICC profiles — tagging web pictures and graphics with profiles — for the following good reasons:

1. Embedded ICC Profiles increase file sizes (about 4K per image).
   a) I may have over 100 thumbnails and dozens of photos on one page,
   b) Plus, I may have an image sliced into many pieces.
   c) That additional 4k per image, per slice, will add up fast and may kill dial-up traffic.
2. Very few computers use color-managed web browsers or calibrated monitors anyway, and
3. Problems with matching/blending image's edges or background color with a filled box or page color.
   d) If I tag the image — ON MAC colormanaged browsers — the color will mismatch the box/page color on managed browsers because the tagged image is being Converted to MonitorRGB, and the untagged page or box color is having MonitorRGB Applied.
   e) This matching or blending a pixel-based graphic to page color is a pretty big deal to do correctly in professional web publishing.
   f) If I publish untagged sRGB images/graphics, the box/page color will match the images and blend correctly in all browsers.

IN FACT, I embed color profiles in less than five-percent of the thousands of pictures and web graphics I have published on the internet, including this professional digital color portfolio of beautiful high-resolution California Native American pow-wow pictures. This professional photography portfolio is in the untagged sRGB color space and demonstrates how knowledgable professional photographers and digital colorists present commercial art portfolios on the internet.

COLOR CONSISTENCY vrs COLOR ACCURACY:

The embedding profiles or not embedding profiles issue boils down to COLOR CONSISTENCY (not embedding profiles) which can be much more important to some designers than COLOR ACCURACY (embedding profiles and using color-managed web browsers and hardware-calibrated monitors).

If your target viewers use color-managed browsers (like Safari), have true-color hardware-calibrated monitors — then by all means embed ICC profiles in photos (if you do not need to match page color or risk losing dial-up visitors).

NOTE:

The target color space for the internet is sRGB, so I would not even consider tagging a web image with any other profile than sRGB.

BEWARE of using 1.8 Mac monitor gamma (MonitorRGB) and Apple RGB, ColorMatch RGB (1.8 gamma color spaces). Calibrate-profile your Mac monitors to 2.2 gamma, D65/6500, and never publish AdobeRGB or AppleRGB on the internet.

Please see the ICC Profiles in Action links (with baby faces thumbnail) at the bottom of this tutorial for profile mismatches, the lighter-darker problems caused by using 1.8 gamma colorspaces — also why we should never use Adobe RGB AdobeRGB on the internet!

How to use Photoshop CS3 to Save For the Web:

Convert to sRGB profile, i.e. sRGB color space:

• Photoshop> File> Save for Web and Devices.
• See the Convert to sRGB option menu (in red above).
• Check this option and Save For the Web (SFW) will Convert your color to sRGB automatically.
• Checking the above Convert option appears to Convert all SFW files to sRGB regardless if the lower ICC Profile option is checked or unchecked.

Note: "Convert to sRGB" is checked by default and I recommend leaving it checked.

To Convert to a profile manually inside Photoshop:

• Photoshop CS2 CS3> Edit> Convert to Profile (select target profile, colorspace)

• Photoshop CS1> Image> Mode> Convert to Profile (select target profile, color space)

Embed ICC Profile in Photoshop Save For Web:

• Photoshop> File> Save for Web and Devices.
• See the ICC Profile option (in red above).
• Check this option and Save For the Web will embed tag your image with a profile.

Note: ICC Profile is checked in the above graphic ONLY to point out the ICC Profile setting option.
"ICC Profile" is UNchecked by Adobe default, and I recommend leaving it unchecked.

#######

Mixing Untagged & Tagged Color, Big Mac OS X Safari Problem:

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 box is filled with AF641E color by HTML page coding.
The logo backgrounds are filled with the exact same AF641E in Photoshop.
The tagged and untagged pixel-based logo 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 to color management 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 (a unique custom device-dependent monitor profile, Monitor RGB).

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) — Windows Vista users must wonder what all this RANTING is about because Vista already matches untagged sRGB and tagged sRGB regardless of browser.

If download time is important to your visitors, opt out of embedding profiles.

MORE DETAILED INFORMATION about saving color for the internet and test my web color theories using all the top web browsers for Windows Vista, Windows XP and Apple Mac OS-X:

SEE TEST EMBEDDED PROFILES IN ACTION Color Management web tutorial
Includes on-line demonstrations of Tagged and UnTagged sRGB, AdobeRGB, AppleRGB
Monitor calibrating and profiling tips, 2.2 gamma, 1.8 Mac gamma, D65 6500 degrees Kelvin.

Read about Adobe Photoshop Assign Profile and Convert to Profile
Includes Photoshop downloads .jpg .tif .png .gif files of Tagged and Un Tagged sRGB, Adobe RGB (1998), Apple RGB and written basic information to understand how Adobe Photoshop handles color profiles.

A more complete in-depth discussion about why and how color shifts on the web
Includes basic information about how to troubleshoot and fix color problems on the internet