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 the basics and share some useful tips on color management for web content.
 

Chapter 4: Color Management for Web – Summary

In the previous three chapters, we talked about how to manage color when creating images for web browsers based off EIZO’s internal testing. Summary of Previous Chapters: Chapter 1: Web Browser Color Management This article explains how web browsers handle color management differently. Chapter 2: ICC Profile Color Management This article explains how web browsers support different ICC profile versions. Chapter 3: Mobile Device Color Management This article explains which mobile devices support color management.

In each article, we stress the importance of embedding an sRGB profile in images intended for viewing in web browsers. In this chapter, we will review everything covered so far and share a quick visual test which will allow you perform checks on your own devices (monitor, mobile device, tablet, etc.) using your preferred browser (Internet Explorer, Chrome, Safari, etc.)
 

Visual Test

How are the two following images displayed on your screen?

Can you see the text displayed in picture B? What about picture A?
Try checking these images in different combinations of browsers and devices and check whether you get different results.

The same image was created using different ICC profiles.

Picture A was created in the Adobe RGB color space, while picture B was created in the sRGB color space, as pictured above. The graph lines in below 3D color map represent the Adobe RGB color space, while the color-filled parts represent the sRGB color space. The colors used in Picture A are indicated by the white circle.
 

Do you know why you can or cannot see the text on your device and browser?
We summarize the display results from different browser and device combinations that we tested in the table below.
 

Results

*Text is visible but not displayed correctly. 
For more information on Android’s Adaptive and Natural color space settings, see this section in Chapter 3.


Below are the results of the above chart explained in detail.
 

Picture A: Adobe RGB Embedded Profile

Picture B: sRGB Embedded Profile

Learn more about color management for web browsers.
 

Monitor Tips for Web Browser Color Management

You can carry out proper color management to reproduce color spaces such as sRGB, Adobe RGB, and DCI-P3 using EIZO’s dedicated color management software, Color Navigator 7. Here are a few tips to managing color for web content on your ColorEdge monitor.

1. Connect your ColorEdge monitor and PC via USB cable. You can change the color mode on a ColorEdge monitor easily by using the switches on the front bezel. However, in order for the color profile and mode to correctly change, the PC and the monitor must be connected via USB cable. Otherwise, the monitor will use the color profile and mode of the last device connected. For example, if the monitor was set to sRGB mode the last time you connected the USB cable, and you do not have the USB cable connected when you change to Adobe RGB mode, you will not be able to see the text in picture A (previous section). In this case the browser will recognize the monitor’s color profile as sRGB even if it is set to Adobe RGB.

2. Restart your browser after changing the monitor’s color mode.
Be sure to restart your browser after connecting the USB cable and changing the monitor’s color mode. This will ensure that the monitor’s profile and the color mode that you change to are the same and your browser refers to the correct information.

3. Use your main monitor for color checking in a multi-monitor environment.
Some browsers will only reflect the color profile of the main monitor when using a multi-monitor setup. We recommend using your main monitor for color checking to ensure you always see the correct color.

See tips for creating in a multi-monitor environment.
 

Summary

Were you able to successfully test using your own device? Understanding how color management is affected by different browsers, color profiles, and devices helps you to ensure your web content is displayed as you intend. Make sure to create content on a monitor that supports proper color management, and always embed the widely compatible sRGB profile to your images when creating web content.


 

　

Recommended Model for Web Creation A 24.1-inch hardware calibration monitor with dedicated color management software ideal for digital media creation. Click here for details.   See how CS2420 looks on your desk!

Return to Color Management Resources