The Human Element Blog

A Tale of Two Images

Posted Jun 13, 2011 by

One of our Magento clients recently told us that there was something wrong with the images on their site.  They had uploaded pictures of their products and that Magento had somehow changed them.  Looking at the site all the products looked correct, but when we compared the images to the originals, it was plain to see that the colors were very muted.   

downtownfdg3_47  downtown3_47_fixed
 Store View  Original Image

We’d never seen anything like this before, but with a little Google-fu, we soon discovered the issue.

Every png, jpg and gif image has some extra data in its header called a “color profile“.  These profiles are defined by the International Color Consortium (ICC) and they set rules for managing color for input devices, like cameras and scanners and output devices, such as printers and monitors. The profile helps these devices render the image so that the colors shown are a close match to the original scene.

The standard color profile used on the web is sRGB or standard RGB. If there is no color profile associated with an image, it’s assumed to be using the sRGB profile and that the color information stored in the file needs no correction. If an incorrect color profile is used on an image, the image can appear faded or washed out. 

Magento’s “incorrect” display of the colors happens because the graphics library that comes with PHP, GD, ignores color profiles.  It drops the information anytime it manipulates an image. This problem with the GD library has been known for some time. Any PHP based system that uses GD will be affected by the problem and there have been complaints about it in WordPress and other CMS tools.

In Magento, when you upload a product image, the original file is stored in the media directory and all the images shown on the site are copies made using GD. These resized images are cached in the media directory and used when Magento need to display the product. 

Using photoshop, we looked at the original images and could see that the color profiles were not set to sRGB, but were ones created by the Cannon camera used at the photo shoot.  To fix the problem, we had to find a way to convert the images to use the sRGB profile – hopefully without having to manually open and export each file. 

Fortunately, thanks to Andry’s photo+blog, that was fairly easy. Using the applescripts he provided and Apple’s ColorSync utility (part of Apple’s OSX operating system) we were able to very quickly reprocess images and transform the color profiles to sRGB.

The updated files were FTPd back to the site, replacing the original images our client uploaded.  Once the upload was done, we deleted the Magento image cache using the admin tools on the cache page. This removed any previously generated images and all new product images were generated based on the ones we updated.

The best work around in this case is prevention. Make sure that all the images are saved for the web using the standard sRGB profile.  For example, when saving from Photoshop, always use “Save for Web” selection. This will remove all embedded profiles and as a result, the images will be generally smaller in file size.

Tags: Magento

Posted By

Chief Technology Officer

Comments (5)

Jason posted

This is kind of a crazy issue. Thanks for posting and figuring it out.

Verle posted

In the complicated world we live in, it's good to find simple soultinos. In the complicated world we live in, it's good to find simple soultinos.

Bazz posted

Brilliant, thank you so much! So many people have asked questions on this issue and they're all running around coding "fixes" which more often than not create collateral problems. This article explains the "real" problem perfectly. More than that, the proof is in my images now :-) Thanks so much for your efforts & sharing!

Marketing A Small Business posted

Thanks so much for this magento solution! Awesome explanation - was going through the exact same process and had got to the Google-fu part when I found this! Exactly the same problem and I'm off to fix it now! :) Thanks for posting!

Ramsay Bell posted

Thanks Greg for posting this helped sort this crazy issue out a while back for me. For anyone else who still has this issue I have built a tool which converts your images on your server, grab it over on GitHub: https://github.com/ramsaybell/magento-product-image-repairer

Post a comment