Color Management in Safari
This Technote discusses how to take advantage of the built-in color management in Safari to make sure your image colors look great.
Introduction
By following the guidelines discussed in this technote you can make sure your images are appropriately color managed in Safari on the Macintosh and on Windows. Additionally, these guidelines cover content that is not color managed alongside content that is color managed on the same web page.
The Challenge of Color Reproduction in the Browser
Often, colors in your images will look different when displayed on the Web. Consider for example a JPEG image in an HTML document on the Web. The pixel colors in the image are directly related to the device on which it was created (for example, a digital camera). The image colors will look different if the image is displayed on a different device.
Safari for Mac OS X and Windows offers a solution to the color issues on the web by providing consistent color management. Safari's built-in color management will correctly display images you've specifically designated to be color managed.
Safari Color Management
Safari uses support for ICC profiles and provides color managed graphics on the Web.
ICC Profiles
Color Management with Safari begins with the ICC profile, a cross-platform profile format that defines the color data required for calculating a color match between devices or between color spaces. Profiles provide the information necessary to understand how a particular device reproduces color, and can be embedded in images to communicate this color information for when the image is displayed.
When creating an image (either with a tool, or programmatically in your application) you should save--along with the document or picture--the profile for the device on which the image was created or modified. These embedded profiles allow for the automatic interpretation of color information as the color image is transferred from one device to another. Embedding a profile in an image (also referred to as "tagging") guarantees that the image can be rendered correctly on a different system.
How to take advantage of Safari's Color Management
Review your web content and determine which images should be tagged, and which should remain untagged.
When you should tag your Images
Generally, you should add a color profile to an image where color fidelity is important. Examples of this include a photograph or a piece of artwork, such as a company logo that needs to appear with the correct colors.
If you do attach a color profile, then the image will have the following characteristics:
It will be color corrected by Safari, and it will have the best possible color rendition of the image data on the user's display
By attaching a color profile to your image, you will ensure the best possible color rendition of the image. In general, this means that your images will look more consistent on both the system that created the content, and on all systems that display it.
When you shouldn't tag your Images
You don't need to embed a color profile for an image that you want to use as an integral part of a web page design, where it needs to match the color of text, colored backgrounds, plug-in content, and so on. This includes image-based widgets, banners, and other colored HTML elements designed to blend in with the page around it.
If you do not attach a color profile to the image, the image will have the following characteristics:
It will be smaller
It can match the corresponding colors in the surrounding web page
Software Developers - How to Tag your Content
Software developers working with the Quartz 2D APIs should read Technical Q&A QA1396 : Creating color spaces that ensure color matching when creating image data that is going to show up on the web.
Cocoa software developers should read the Cocoa Drawing Guide, and look for the sections Associating a ColorSync Profile With an Image and Converting Between Color Spaces to learn how to properly create image data for the Web.
Content Creators - How to Tag your Content
Many image editors (such as Photoshop, Preview, Graphics Converter and so on) can save images with embedded profiles. See the instructions that came with your application to determine how to correctly set up your application for color management.
You can also use an image editor to add or replace a color profile to your image. For example, follow these steps to add or replace a color profile to your image using Preview.
Make sure you have the proper color profile selected. If you are not sure, duplicate the images or have a backup copy of the images.
Open your image in Preview.
From the Tools menu, choose Assign Profile...
From the "ColorSync Profile:" pop-up menu select the appropriate color profile.
From the File menu, choose Save (or Save As to save a different copy).
For batch processing of images, Automator provides an Apply ColorSync Profile to Images action.
It's very easy to set up a workflow using Automator. For information on using the Automator application, choose Help in Automator or Help > Mac Help in the Finder and search for “Automator”. For information on creating actions, see Automator Programming Guide and Automator Framework Reference.
Similarly, the Mac OS X Scriptable Image Processing System (SIPS) tool can be used for batch processing of images and contains commands to both add and remove profiles.
For more information about SIPS, see TN2035 ColorSync on Mac OS X.
References
Document Revision History
| Date | Notes |
|---|---|
| 2009-10-22 | New document that discusses how to take advantage of the built-in color management in Safari to make sure your image colors look great. |
Copyright © 2009 Apple Inc. All Rights Reserved. Terms of Use | Privacy Policy | Updated: 2009-10-22