Blog → Fix wrong color in your web images

If you will Google it a bit there are many complains for this issue: why the colors on my photo uploaded to some website are not so vibrant as on my laptop/desktop?!? The answer is pretty simple: mismatched color profile.

A bit of technical background (let's take jpeg image format and sRGB color space as most used): the ColorProfile is embedded as text (aka metadata) string in you jpeg file. And it will not touch any image pixel data stored in jpeg. In ideal world your hardware and software (say operating system, display, video card, browser, printer etc) should read and obey it to give your image the colors according to embedded metadata. But unfortunately it is not yet so despite ICC standards are available for many years.

Here is a simulated example:

Regarding web image publishing there will be two major faults:

#1 The web browser. Currently only Apple's Safari or others based on WebKit (say Google's Chrome) and Firefox 3 (supposedly) will read this metadata to show image with right colors. Internet Explorer will ignore it usually giving slightly dimmer colors. But #2 may destroy it all anyway.

#2 The website image handling engine. The most common PHP GD library would just remove this metadata from the image on any processing (resize, thumbnail creation, etc). The other quite widespread image processing library - ImageMagic would gives better results usually, with perfect ColorProfile handling, but it should be properly configured to do so, which is a rare thing.

Not the best ever technologically speaking, but a simple solution to make your web images look better: Convert (not re/assign) your sRGB color profile to RGB (or Generic RGB) before you add the image to your website. The process will exactly (re)render the whole image with new pixel color values vs just adding metadata to the picture. Not so good solution for the perfect world, but works quite all right for the real one.

The Mac way is easy. ColorSync Utility supplied with any OSX can do it just fine. Couple that with Automator and you have batch utility co convert a few images at once. Unrelated small problem here: Automator may hang up f you try to process 1000-ish item folder. It looks like Automator issue in general. So spread your images to less then say 800 images folders before processing.

You can download Automator workflow from my github project page or create your own.

And of course this workflow release under GPL.