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 Management

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

ICC Profile Color Management

 

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.
 

What are ICC Profiles?

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

Color Profile Adobe RGB (1998) sRGB IEC 61966-2.1 Display P3
ICC Profile Version 2 (2.1.0) 2 (2.1.0) 4 (4.0.0)


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

Browser Name Chrome Firefox Internet Explorer Safari
Browser Version 78.0.3904.70 70.0 11.805.17763.0 13.0.2 (15608.2.30.1.1)
OS Windows 10 Windows 10 Windows 10 macOS mojave (10.14)
Compatible ICC Profile Version 4 2 4 4
  • 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.

01 02

 

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.

03 04
05

 

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 SettingsSystemDisplayAdvanced Display SettingsDisplay Adapter PropertiesColor Management tabColor 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.
Color Management

 

For macOS Catalina 10.15.1

Go to System PreferencesDisplays → and select the Color tab. Then click the ICC profile you want to check and click the Open Profile button.
sRGB Color Space Profile

 

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.


 

250x200_cs2410.jpg
cs2410_logo.jpg
 

Recommended Model for Web Creation

Covers 100% sRGB
A 24.1-inch hardware calibration monitor with dedicated color management software ideal for digital media creation.

Click here for details.
 

ar_banner.jpg
See how CS2420 looks on your desk!



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