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.
 |
 |
| 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.
