Blog - Todd White Photography

Blog posts featuring images and video from shoots with Todd White Photography and Videography

Image Desaturation and Browsers {Gear, Technique}

I recently uploaded some new images to my site and noticed most of the images had a noticeable amount of desaturation to them. I went back and checked the files on my hard drive and they were fine there. So this began the troubleshooting process. I called the hosting company I use and confirmed that there was no image compression or manipulation being done on their end that would cause this. The images were looking different depending on the browser being used for viewing. The original images were saved with the Adobe RGB color profile. Below is a sample of the image before i started making corrections.

Image in Chrome with Adobe RGB profile:

Adobe RGB in Chrome

Image in Safari with Adobe RBG profile:

Transient

As you can see, there is a noticeable difference in color between these two images. After much troubleshooting, testing and reading I discovered that the issue boiled down to the color profile I was using when exporting. Different browsers read color profiles differently or some browsers are not configured to read all color profiles. Most all browsers will read the default internet standard color profile "sRGB." Based on my research, I need to save my online images with the sRBG color profile to get the color closest to what I was seeing on my desktop. I have usually ignored this color profile because of it's limited color palette but now it has a place in my settings. I've updated my export presets in Photoshop and Lightroom to have an "Online Image" image preset with sRGB as the color profile. I have not modified my working space to sRGB but have left that at AdobeRGB.

So for printing and other purposes, I will still use the Adobe RGB profile with a resolution setting between 240-300. But for posting images to the internet, I will begin using the sRGB color profile with a resolution setting of 72. A higher resolution setting can be used but browsers only display up to 72. Below is a sample of the same image after I changed the color profile to sRGB.

Image in Chrome with sRGB profile:

Transient

Image in Safari with sRGB profile:

Transient

As you can see the image in Chrome (which was my "problem" browser) looks much better than the original image. The saturation is more true to the colors I wanted but still not as deep as the colors shown in Safari. I have checked the image in Firefox and all looks good. Through this experience I have learned more about the differences in browsers and the validity of checking my site/portfolio in the different browsers. I really enjoy using Chrome but it does beg the question of why it was it so far off in displaying images correctly. It was the browser with the most color difference. Hopefully one day all browsers will adopt standards for basic things like image display, javascript, layout and other areas that can cause frustration for web developers.