Contact us EIZO Limited, 1 Queens Square, Ascot Business Park, Lyndhurst Road, Ascot, Berkshire, SL5 9FE

Many of us have occasion to publish images on the web – corporate websites, e-commerce websites, blogs, social media platforms, and others. Are the images that you publish of products, people, artworks, etc. presented to website visitors in the intended colours? There are several points you will want to consider when uploading images to the web. In this article, we will delve into web colour management based on results verified by EIZO while throwing in tidbits of knowledge.

Web Browser Colour Management

First, let’s discuss how colour management is supported in various web browsers – Chrome, Firefox, Internet Explorer, and Safari. Each web browser has its own characteristics, so some web creators prefer to check how content is displayed in different web browsers. We will look at what rules should be followed for good colour management of images uploaded to the web based on EIZO’s internal testing.

Why Colours Look Different in Web Browsers

Have you ever checked an image you created in a web browser and saw that it displayed with extremely loud colours without proper gradation, subdued appearance, or just completely different colours than you intended? If the colours of the image in the web browser differ from how they looked when it was created, it could cause problems, such as a product not being conveyed truthfully to those browsing your website, or excessive time invested in reworking the image.

There are two main reasons why colours look different in web browsers:
(1) A suitable colour profile has not been set for the image
(2) The web browser’s colour management characteristics vary, causing colour deviation

It is very important to have the correct understanding of the colour characteristics of each browser, as well as a proper monitor environment to correctly manage the colours in images. Below are some specific points to pay attention to.

Colour Management Basics

Always Embed a Color Profile
By embedding a colour profile in the images, you can communicate the intended colour gamut to the web browser. Colour profiles define colour characteristics for devices and image data. For image data in the RGB colour space, it is common to use the versatile sRGB or the more professionally oriented Adobe RGB colour profile. Software that can utilise colour profiles is called colour management capable software (e.g. Adobe Photoshop). The extent to which web browsers support colour management also varies, so the way that images look across different browsers is not uniform.

You have probably heard that sRGB is the standard for the web. In fact, colours specified in CSS, which is a style sheet language for web building, are in the sRGB colour space. By embedding the sRGB colour profile in images to be published on websites, you can ensure that they are properly displayed in more environments.

Referencing a Monitor Profile
Monitor profiles are data files that communicate what colours the monitor displays to the system and are separate from the colour profiles embedded in images. With ColorEdge, when the monitor is adjusted using the free software ColorNavigator, the monitor profile is automatically configured in the OS of the computer. For web browsers that support colour management, referencing not just the colour profile embedded in the image but also the monitor profile ensures images are properly displayed according to the characteristics of the monitor or other display device.

If enough attention isn’t paid to colour management, images will not display in the proper colours!

Colour Management in Each Web Browser

EIZO tested how images are displayed according to various web browsers. The results are visible in the below chart.

Chrome / Safari

Chrome and Safari can properly display images by referencing the image colour profile and monitor profile. The sRGB colour profile is automatically applied to images without a colour profile. It is versatile and reliable, but always embed a colour profile when creating images, keeping in mind that other browsers may be used to view them.

Internet Explorer

Internet Explorer references image colour profiles but not monitor profiles. As with Firefox, images without a colour profile are stretched or shrunk according to the monitor’s colour gamut, so in some cases, the colours could be extremely loud, subdued, or off. Always embed a colour profile when creating images to preserve the colours you intend. This browser also recognises all monitors as sRGB monitors regardless of the actual colour gamut. As such, images do not display correctly on Adobe RGB monitors.

Tips for Creators Using a Multi-Monitor Environment

Main Monitor for Color Checking
As shown in (4) in the above chart, colour management only works properly on the main monitor when using Firefox or Internet Explorer. Some image editing software behaves the same way, so if you use multiple monitors in your creative environment, always check the colour on the main monitor.

Summary

• Always embed a color profile in your images to accurately communicate the intended colors.
• By embedding the versatile sRGB color profile in images published on the web, you can minimize color miscommunication.
• Monitors that can accurately reproduce the sRGB color space are suited to web content creation.