Handling Image Color Profiles in Web Development

We ran into an issue at work today where when uploading an image into a custom written code base there was a shift in the colors – they were turning out darker than the original image provided to us by a vendor.  We went through our code and couldn’t find anything that stood out as being an issue.  This code base has been used for years…  One thing that “changed” though is that an employee left and while many people knew that he “converted images in Photoshop to make it work”.  After some monkeying around, I realized that what was being done was the images were being saved from Photoshop through a batch script (File -> Scripts -> Image Processor) that sets the color profile of the JPEG file to sRGB.

But what is sRGB and how is it different than RGB?  Well turns out when working in Photoshop there is a big difference.  And I’m not the expert in this, rather more well educated in it.  BUT, someone that is an expert wrote this awesome article.  Thank you Ken Rockwell.

But what I’m taking from this research is this one paragraph from Ken’s article is this.  sRGB is the world wide standard profile for the RGB color space.  But Adobe created their own profile called AdobeRGB.  As Ken puts it:

Adobe RGB squeezes colors into a smaller range (makes them duller) before recording them to your file. Special smart software is then needed to expand the colors back to where they should be when opening the file.

So there we go – I found the actual culprit to the issue.  I should note that I’m assuming the original vendor images were saved from an Adobe piece of software.  Images directly from a camera or another image editing software may not have this issue as they may not use AdobeRGB.

As for fixing it, well the solution we put in place for now is to continue to just convert the files in Adobe Photoshop prior to doing our upload.  But our thought process in improving our process is this: we use ImageMagick in PHP to do some image processing already.  What if we converted the color profile to sRGB using ImageMagick?  Would that do the same thing as doing our pre-conversion in Photoshop and thus aleivate our problems?  At this point it’s just a thought that has yet to be tested.  If we get around to doing that, I’ll followup with the conversation here.

The image on the left is the original Hi-Resolution image from the vendor. Note in the properties that the Color Representation is set to Uncalibrated.  This is the AdobeRGB image. The image on the right is the converted image from Photoshop set to sRGB. Note in the properties that the Color Representation is set to sRGB.
The image on the left is the original Hi-Resolution image from the vendor. Note in the properties that the Color Representation is set to Uncalibrated. This is the AdobeRGB image.
The image on the right is the converted image from Photoshop set to sRGB. Note in the properties that the Color Representation is set to sRGB.