Why do we see different colors on different browsers?
Google Chrome browser, Microsoft Explorer, Mozillas Firefox, and Apple´s Safari dominate the browser market on both desktops and mobile devices. However, apparently 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 it 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 have then produced a series of photographs and with their photographers and post production team. They have spent a lot of resources in 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 to different browsers. (the client approved the image colors to the left)
Another example could be that a corporate communication department releases the newly photographed CEO in all the online corporate communications channels. The images that was taken by a professional photographer to insure 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 fashion, automotive, publishing, and financing industry. 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 a non color managed image, but instead it was the corporate CMS system, or their supplier of online PDF viewers, and even very popular image optimisation plug-ins that are used on many platforms.
But how can we insure correct colors?
Traditionally color management have been used to insure correct color printing in various print medias, such as on coated or uncoated paper and news paper 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 in various platforms, but now we can actually insure that the images appear very similar regardless off 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 result is close to a perfect harmony of all colors between all platforms.
Convert all images to the sRGB ICC profile and insure that the images are saved with the profile included. This way all the various browsers can interpret the colors correct, and even browsers on mobile devices, that actually does not support color management, will actual 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 system per default will remove all ICC profiles in the images. So you must contact your IT department, developers or external application providers to insure 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, IT team etc 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.