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:
Image in Safari with Adobe RBG profile:
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:
Image in Safari with sRGB profile: