Why do we see different colors on different browsers?

Google Chrome browser, Microsoft Explorer, Mozilla Firefox, and Apple´s Safari dominate the browser market on both desktops and mobile devices. However, they can not agree on how to implement image color management with or without the use of ICC of profiles. Officially they all agree on the W3C standards, but in reality, they implement them differently.

The result is that many companies using images in online communication experience that the clients see the same image with different colors, depending on their browser and or platform.

Why is this a problem?

Let us imagine that a fashion design company has designed a series of styles in beautiful pale orange tones matching the trends of the times. The marketing team has then produced a series of photographs and with their photographers and post-production team. They have spent a lot of resources on getting the images perfect with all the right colors. Now the images are being implemented in various websites, email campaigns, online PDF viewers, digital signage systems. But because of incorrect color management, the clients are seeing all the images as bright red instead of pale orange – and the result is that the clients decide to purchase from a competitor instead.

The screenshot below shows the same image without the sRGB ICC profile viewed in different browsers. (the client approved the image colors to the left)

safari_chrome_icc

Another example could be that a corporate communication department releases the newly photographed CEO in all the online corporate communications channels. The images were taken by a professional photographer to ensure the quality and sincere appearance of the new CEO. The images were retouched and color graded to look perfect, with a nice and healthy-looking skin tone. But bad color management will change the perfect photograph and make the CEO looks too saturated and reddish, which gives the appearance of an alcoholic in a suit. A horrible result!

I am sure my company does not have this problem!

In 2016 The Color Club performed an unscientific spot test of 30 large intl. companies websites within the fashion, automotive, publishing, and financing industries. 29 out of 30 websites did not use prober color management, and the result is that their visuals appear all different in different browsers. And as we began to investigate deeper into this issue, we discovered that many times the culprit was not the designer uploading an image that had not been color-managed, but instead, it was the corporate CMS system or their supplier of online PDF viewers, and even very popular image optimization plug-ins that are used on many platforms.

But how can we ensure correct colors?

Traditionally color management has been used to ensure correct color printing in various print media, such as on coated or uncoated paper and newspaper ads. But today more and more marketing channels are not physical reproduction, but digital visuals in websites, banners, emails, PDF viewers, digital signage systems, and more.

For many years there was little to do about the different visual appearance of your images on various platforms, but now we can make sure that the images appear very similar regardless of where they are shown, like on a PC, Mac, Mobile device, TV monitor and regardless of which browser is used. We simply apply color management to all images and the result is close to a perfect harmony of all colors between all platforms.

The recipe!

Convert all images to the sRGB ICC profile and ensure that the images are saved with the profile included. This way all the various browsers can interpret the colors correctly, and even browsers on mobile devices, that actually do not support color management, will presume that the image shown is in sRGB color spectrum. You can download detailed instructions here.

The practical challenges

When images are uploaded to the website content management systems (CMS), email campaign portals, online PDF viewers, and other online tools, often these systems will rescale and convert the images to fit the platform. And here is a challenge. For years, it has been common practice among production departments and developers to discard the ICC profile in all images to save a few bytes per image. And that is why many of these systems per default will remove all ICC profiles in the images. So you must contact your IT department, developers, or external application providers to ensure that they change the default system configurations to keep the ICC profiles in all images.

The techies do not believe me!

In case your designers, retouchers, programmers, developers, and even IT team do not believe you, please send them a copy of The Color Club R&D Color Management Report with complete documentation and practical instructions of ICC profile conversion in Adobe Photoshop, InDesign, etc. You can order the report for free by filling in the form below.

Now you know how to get the colors right in your digital marketing channels.