livebooks blog

You might have noticed the images on your website display different colors depending on the browser you’re viewing them from, or whether you’re using a mobile device. The differences are subtle and they are more in the lines of saturation, but they’re there. And while you don’t know what device your clients are using or whether their screens are calibrated, you need to do your best when saving your images for the web to reach a satisfying compromise. The source of these slip-ups can be tracked down to how your images are converted and whether or not they contain an ICC profile.

sRGB and ICC Profile

In the pre-mobile times, all monitors and browsers were presented with pretty much the same color scheme – Standard Red Green Blue. If you saved your images in sRGB, it was likely your images looked the same on all browser desktop versions and on all monitors.

Now, with the introduction of tablets and smartphones, another layer of identifying and displaying color has become available, but only on desktop – the ICC Profile. You must enable the Color Profile in your image editor software when you save the image for web. This will enable all browsers to read your image settings as they truly are, and thus, display them correctly.

Alas, the mobile devices still use mainly sRGB, with the exception of Safari for iOS, which also reads ICC Profiles. So before you save the image, make sure to convert it to sRBG.

The Firefox singularity

While Firefox is designed to interpret ICC profiles, its default display values are as of this time inaccurate. Perhaps a future update will fix this value, but for now, here’s what you ca do to force the browser to read the proper ICC profiles.

Write about:config in the address bar and gfx in the search bar that appears below. Look for gfx.color_management.mode and click on it to change the value from 2 to 1.

This will activate a complete color management in Firefox and if your images contain ICC profiles they should be displayed correctly on your monitor.

Unfortunately, until there will be a unification of display settings for all monitors and all browsers and platforms, small differences are bound to appear. And since you cannot control what device your clients are using when viewing your images, you have to do your best to set them up in the most common format: saving them in sRGB and adding an ICC Profile to each of them.