Case Studies
Color Management for Creators - ICC Profiles
There is plenty of occasion to publish images on the web, including corporate websites, e-commerce websites, blogs, and social media sites. Are the images of products, merchandise, designs, etc. that you publish presented to readers in the colors you intended?
In this article, we will cover several important points on what to check before publishing images on the web, based on results verified by EIZO.
Chapter 1: Web Browser Color Management | Chapter 2: ICC Profile Color Management | Chapter 3: Mobile Device Color Management | Chapter 4: Color Management for Web – Summary |
Chapter 2: ICC Profile Color ManagementAs we covered in another article, Color Management for Creators – Web Browser Edition, it is important to embed color profiles in image data to ensure that colors are displayed as the creator intended. Creators must also keep differences between color profile versions in mind, so that colors are displayed properly, regardless of the web browser used. In this article, we will introduce the two different versions of ICC profiles (version 2 and version 4) and discuss ICC profile compatibility with different web browsers. |
|
What are ICC Profiles?
ICC Profile Versions
How to Check the Color Profile in Photoshop
How to Check the ICC Profile Version
Summary
What are ICC Profiles?
ICC profiles are files that describe color characteristics on a per-device basis, in a format established by the International Color Consortium (ICC), an international standards organization. ICC profiles include both color profiles and monitor profiles. Color profiles define color characteristics for devices and image data. Monitor profiles are data files that communicate what colors the monitor displays to the system. By using these ICC files, it is possible to correctly display colors through a standardized color space, regardless of an individual devices’ color characteristics. |
|
ICC Profile Versions
There are two versions of ICC profiles.
- Version 2: offers high compatibility and has been around for longer
- Version 4: a backward-compatible revised version with clearer definitions, which enable greater display precision
Versions Used by Common Color Profiles
As you can see from the table above, sRGB and Adobe RGB use v2, while Display P3 uses v4 — each color profile relies on a specific version. Web creators should keep in mind that ICC profile version compatibility may vary by web browser. For instance, if a web browser that only supports v2 tries to display image data that has an embedded v4 color profile, the colors may not display as the creator intended.
The table below shows ICC profile version compatibility by web browser. Web creators should consider that colors may be displayed in both v2 and v4 environments; we recommend embedding the sRGB profile into image data, because sRGB is built on the v2 ICC profile, which all web browsers support.
ICC Profile Version Compatibility by Web Browser
- Results of verifications performed for the latest web browsers as of October 2019. Actual compatibility may vary due to web browser updates.
You can use the following page on the official ICC website to check your web browser’s ICC profile version compatibility.
http://www.color.org/version4html.xalter
- If the image displays with the proper colors, the browser supports v4.
- If the image displays with the wrong colors, the browser is either incompatible with v4 or incompatible with both v2 and v4.
How to Check the Color Profile in Photoshop
Checking an Embedded Color Profile
Open the image data in Photoshop, click the arrow on the bottom left of the screen and select Document Profile. The color profile will display to the left of the arrow.
Changing an Embedded Profile
From the top menu, go to Edit then Convert to Profile…. Next, select the profile you want to use from the Profile drop-down menu.
Checking the ICC Profile Version
ICC profiles are stored on a computer’s operating system. To check the specific version on your computer, follow the instructions below.
For Windows 10
Go to Settings → System → Display → Advanced Display Settings → Display Adapter Properties → Color Management tab → Color Management…→ and select the All Profiles tab. Then click the ICC profile you want to check, and the version will be displayed at the bottom.
For macOS Catalina 10.15.1
Go to System Preferences → Displays → and select the Color tab. Then click the ICC profile you want to check and click the Open Profile button.
Summary
- There are two different ICC profile versions (v2 and v4), and version compatibility varies by web browser.
- The sRGB color profile uses ICC profile v2, which will display correctly in any browsers that supports either v2 or v4.
- Before publishing images on the web, we recommend embedding the sRGB color profile, due to its versatility.
|
ã |
Recommended Model for Web Creation
|
Return to Color Management Resources
Chapter 1: Web Browser Color Management | Chapter 2: ICC Profile Color Management | Chapter 3: Mobile Device Color Management | Chapter 4: Color Management for Web – Summary |