© Heiner Lamprecht
logo

Colormanagement in webbrowser

Colormanagement in webbrowser

If you want to publish images on the internet, you never can be sure, how the images will look like on the screen of the viewer. Beside a large number of external issues (screen settings, lightning, …) only very few people have a colorimeter and calibrate their screens on a regular basis.

But even then, there is one last problem: the webbrowser. As of writing this article, at least on Windows and Linux, browsers usually don’t support color management. Embedded profiles are usually completely ignored. But there’s hope: Firefox supports color management since version 3. If it is disabled, you can change it in the configuration. Just enter “about:config” as the address and change the value of “gfx.color_management.enabled” to “true” (you have to double-click it in order to change it), than restart the browser.

The images on this page may help you to check, if color management is working with your browser.

Profiletest

2004-06-23__21-38-01_000_sRGB2004-06-23__21-38-01_000_cs On the right side you see two versions of the same photo. The right one was converted into the sRGB color space. This color space was defined back in 1996 as the average color space of CRTs. It is still a good choice when it comes to displaying images on non-calibrated systems, and therefore for images posted on the internet.

The left images shows the very same image, but in the ColorSpin color space. This color space features the same colors as sRGB, but the coordinates for red, green and blue are changed. The profile was designed by Hans Jürgen Groß from DeltaE Image Consulting. It can be downloaded from his website. I agree, this is an extreme example, but it’s good for testing purposes. If you browser supports color management, both images should look the same. Note: You have to click on the images and open the large version for comparison. The thumbnails to not contain a color profile.

Which profile is the best

As I told before, sRGB is useful for all images to be posted on the internet, as it is quite close to the average of most computer monitors. However, it is still a workaround. There are still some CRT or displays used, which show very different colors. But as long as most browsers do not support color management, sRGB ist a good choice.

But is sRGB also a good choice for editing and archiving images? Clear answer: Yes and No. It all depends what you want to do with your images, and what colors are used in the images. If you only want to post images on the internet, you may stay with sRGB forever. But as soon as you may have other ideas, like printing images or doing more editing, you should use a larger color scape right from the beginning. Many cameras offer to use AdobeRGB, which features a gamut larger than sRGB. If you shoot RAW images, camera settings doesn’t count at all, the color space only come into play at the end of the RAW convertion.

While larger gamuts are better in the sense that they cover more colors, you should keep an eye on the color depth of your files. Using large gamuts with only 8bit images may lead to problems with smooth gradients.

Don’t forget to convert

When using a working space larger than sRGB, you should not forget to convert the images to sRGB correctly before publishing. The following four images show the same photo in four different color spaces.

The images all have a profile embedded, telling the browser or other applications how to render them. If you browser support color management, all images should look the same (again: Click on the images to see the original files). But if you remove the profile, the applications get lost, as you can see in the four images below:

Comparing profiles

ProfilVergleich The image on the right compares the four different profiles used in the examples on this page. The colored area of the diagrams represent the colors visible to the human eye (CIE 1931 color space). The triangles inside represent the colors that can be displayed by the respective color space. The small circle in the middle defines pure white.

As you can see, AbodeRGB and sRGB are quite similar. Only the green corner has been moved a bit, allowing for more intense green and blue tones. The other two color spaces are a lot larger and offer more saturated colors in all three fundamental color. That’s the reason, why images in these color spaces look quite sluggish, if you forget to embed the profile.