Avoid colour profile horror on the Web

Published on 10^th May 2008 in Websites, tagged colour, Firefox, Safari.

Safari is a fine browser, but I’m put off by its lack of seemingly basic features, like a new tab button. Sure, you can get plugins to solve this, but you shouldn’t have to. However, one thing it does right is colour. Observe:

This image, taken from my GTA IV review demonstrates why colour profiles can cause havoc on the Web and why you should care. As you can see, the Safari image is more saturated and the Firefox one washed out. This is because Safari supports embedded colour profiles, while Firefox does not.

Not all images are affected though, only ones not using the standard RGB profile. On the review, you may notice that the screenshots aren’t any different. Let’s have a look at the images’ EXIF profiles to see why:

As we can see, the first image has a more complicated profile. I created it in Photoshop and gave it the sRGB profile. The second image has a much smaller profile though, with only RGB.

This might not seem like much of a problem, but for photographers, it can be a bit of a nightmare. There’s nothing like adjusting an image on your computer to perfection, only for a browser to incorrectly colour it.

However, Firefox 3 will have colour profile support like Safari, but it won’t be turned on by default. This doesn’t make much sense to me, but for the full reasons, you can check out this post. When turned on, the difference between Firefox 2 and 3 is quite noticeable:

Until browsers include colour profile support by default, designers will have to do with simply being aware of the problem. Even if you don’t use many photos, then you should still be wary of the potential risk of mixing profiles in a user interface or site design, which you wouldn’t spot unless you use a browser like Safari.