How to stop GD2 from washing away the colors upon resizing images?

Question

I have developed a photo sharing community site using CodeIgniter 1.7. Photos that are uploaded by members are automatically resized in a number of formats, for which I use the CodeIgniter Image Manipulation class. This class is built into the framework and basically a wrapper around multiple image manipulation libraries, such as GD, GD2, ImageMagick, and NETPBM. On my host, I can only make use of GD2, so that's where this question will be about.

On to my problem. Here is an example of a resized photo on my site. Note that the original was very large, over 3000px wide:

http://www.jungledragon.com/image/195/female_impala_close-up.html

Now, look at that same image, also resized, just a bit larger at Flickr:

http://www.flickr.com/photos/fledder/3763538865/in/set-72157621744113979

See the dramatic difference? I'm trying to bridge that huge gap. The first thing I did was to apply a sharpen filter to the images. You can see the result here:

Although still not perfect, it at least approaches the sharpness level of the Flickr image. The remaining problem is that the colors are washed away, as if their saturation is decreased. This happens before the sharpening filter already, so it must be in GD2.

This issue is vitally important to me, but I don't know where to look. I've found some .NET threads talking about chroma sub sampling but I don't know what to do with that information in my setup. I'm looking for any solution that works within the constraints of my setup.

Update: Hereby the original file, exactly as I uploaded it both to my site and Flickr:

http://www.jungledragon.com/img/DSC07275.jpg

Update 2: I'm shocked. In a good way. It took me a lot of pain to install ImageMagick but after switching to it (which was a matter of setting 'imagemagick' as the library to use at the Code Igniter image manipulation class, the result of the test image is as follow:

ImageMagick's resizing is doing it exactly as intended. The colors are preserved, and the sharpness is there. Yes, I disabled my custom sharpening routine since it is no longer needed due to ImageMagick. On top of that, the process is a lot faster and less memory hungry too. And here comes another great part: I cannot explain it, but I did absolutely nothing to tell ImageMagick to use a specific color profile, which was suggested by user @Alix. In my testing so far it looks like the color information is respected with or without an embedded profile. The output simply is a smaller version of the input. Is ImageMagick really that smart or am I dreaming?

Juarez

This looks like a profile issue. Do the photographs come with a ICC profile? Would it be possible to see an actual original file (not the Flickr version)? Is there any way to try this with ImageMagick, if just temporarily to see whether there's a difference? – Disused

The Flickr image indeed comes with a built-in profile: IEC 61966-2.1 Default RGB colour space - sRGB not entirely sure what needs to be done, but this is where you will need to be looking. – Disused

I updated the question to include a link to the original file. Thanks for the pointer, I hope this will narrow my search. I cannot switch to ImageMagick in my current setup, but if it turns out that is the only possible solution, I will look for arrangements in that area. For now, I hope this can be solved in GD2. – Juarez

Your original image has a Adobe RGB (1998) ICC profile attached. Hmm. Do you have Photoshop? Can you try converting the image to sRGB, and upload it again? I'm afraid I don't think GD is going to be able to deal with the profile, it doesn't know anything about them so you'll have to spoon-feed the right data to it. ImageMagick knows the concept of profiles, at least at a basic level, hence my question. – Disused

I just tried both removing the profile in Photoshop as well as switching to a profile with a completely different color tone. On screen they look a lot different. Until I upload them. It doesn't seem to matter down, all are toned down like screenshot in the question. – Juarez

@Ferdy so switching to sRGB didn't help? Did you try saving it entirely withour a profile (using the check box in the "Save as" dialog) I don't have Photoshop handy, or I'd try myself. – Disused

The image on your site looks closer to the original than on Flickr. – Rogerson

@OZ_ not for me! The Flickr and the original image look almost identical on my system, the GD image differs notably – Disused

Pekka, users will look at pictures in browsers, not in Photoshop, so it might be interesting for you to see, how looks it in my browser (Opera): img841.imageshack.us/img841/6217/compareb.png – Rogerson

@ _OZ: that's an interesting observation. I would argue that whatever you use to look at the original does not respect the color profile. It will indeed result to the toned down colors you are seeing. Yet, that makes it strange that you do see the full saturation of the image at Flickr. What did you use to view the original? – Juarez

Answer 1

I've managed to further test this with Imagick:

The left half of the image was processed with Imagick and the sRGB_IEC61966-2-1_no_black_scaling.icc color profile, the right half has no color profile associated and shows exactly the same if processed with Imagick or GD; here is the code I used:

header('Content-type: image/jpeg');

$image = new Imagick('/path/to/DSC07275.jpg');

if (($srgb = file_get_contents('http://www.color.org/sRGB_IEC61966-2-1_no_black_scaling.icc')) !== false)
{
    $image->profileImage('icc', $srgb);
    $image->setImageColorSpace(Imagick::COLORSPACE_SRGB);
}

$image->thumbnailImage(1024, 0);

echo $image;

---

Here is a comparison of the several sRGB profiles available on the color.org website:

It seems to me that the third profile produces the most vivid results, other than that I have no idea how one would make a definitive choice.

---

EDIT: Apparently, Imagick comes with a bundled sRGB profile, so you don't need to download the one from the Image Color Consortium website, the following code should handle all scenarios:

header('Content-type: image/jpeg');

$image = new Imagick('/path/to/DSC07275.jpg');
$version = $image->getVersion();
$profile = 'http://www.color.org/sRGB_IEC61966-2-1_no_black_scaling.icc';

if ((is_array($version) === true) && (array_key_exists('versionString', $version) === true))
{
    $version = preg_replace('~ImageMagick ([^-]*).*~', '$1', $version['versionString']);

    if (is_file(sprintf('/usr/share/ImageMagick-%s/config/sRGB.icm', $version)) === true)
    {
        $profile = sprintf('/usr/share/ImageMagick-%s/config/sRGB.icm', $version);
    }
}

if (($srgb = file_get_contents($profile)) !== false)
{
    $image->profileImage('icc', $srgb);
    $image->setImageColorSpace(Imagick::COLORSPACE_SRGB);
}

$image->thumbnailImage(1024, 0);

echo $image;

Unpriced

I believe that if you use scaleImage() or resizeImage() instead of thumbnailImage(), it will preserve the color profile without having to manually inject it. This is the case with imagemagick on the commandline, I assume it also applies to the Imagick class. – Walterwalters

@AlixAxel I only needed to preserve the profile, not force a different one, but your answer put me on the right path. I left my comment to save other people in the same situation a bit of time. – Walterwalters

Nice work. Just pay attention to avoid using stripImage, that removes color profile and change the color result. – Tycoon

Answer 2

Your original image has a Adobe RGB (1998) ICC profile attached. I think GD, not knowing about profiles, is interpreting the image data incorrectly. Here's a related PHP bug confirming this.

You would need to prepare the image with the correct profile, most likely sRGB. If you have an application that can do that, try converting it to sRGB and re-uploading.

If you need a permanent server-side solution to the problem, I think you will need an image processing library that can deal with profiles. To be honest, I don't know how ImageMagick deals with these things, but at least it is familiar with the basic concept of colour profiles.

Related: Comparison of sRGB and Adobe RGB

Disused

My idea of the solution would be that users do not have to prep their images in any special way before uploading. Just like Flickr. So preparing the image should not be needed. Nevertheless, you do have a very useful answer. I'm still hoping for a GD2 solution and will keep the question open for a while. If no solution comes in, I will investigate ImageMagick and mark yours as the answer. Thanks! – Juarez

@Ferdy you're welcome. I'm afraid I don't think there will be a GD2 solution for this, but I can be wrong. Here's somebody with the same problem: bugs.php.net/bug.php?id=53598 – Disused

You are likely right. The evidence that this is indeed to do with profiles is building up. I'll take that as a fact now, yet am still in need for a solution :) – Juarez

I'm now having second thoughts. My test image had the Adobe RGB color profile in it, which really was a failure on my side to properly export it to the web from lightroom. I tested photos from other members and there I do not see the color difference. The question therefore is, how many users do not export using sRGB or no color profile? If that percentage is small, I may be able to live with this. What do you think? – Juarez

@Ferdy good question! If the image came from your camera, or from lightroom, with the profile attached, I imagine this is not entirely out of the equation among professional photographers. But I don't know really. Maybe ask over on photography.stackexchange.com? – Disused

Good suggestion, I posted a questions asking about stats there: photo.stackexchange.com/questions/11265/… – Juarez

Answer 3

I have a small bit of info to contribute to this thread. I'm a photographer and not a web developer so my technical knowledge is not great, however, I have been dealing with this issue so I hope this post will help someone else down the line.

I use an online photo sales tool that resamples all my images using GD. I was having issues with images looking way funky even when uploaded with proper sRGB conversion and ICC profiling attached, when viewing on my wide-gamut monitor.

What I found the problem to be is that GD strips all metadata and ICC profiles from the original files. Then the browsers, not seeing any profile, are not displaying them correctly. It's slight on a standard-gamut monitor but very obvious on wide-gamut.

If you're having problems with this, you can test my theory by using Firefox and changing a setting in about:config. Change the value of "gfx.color_management.mode" from the default of "2" to "1". This setting will force Firefox to assume any image without an ICC profile is sRGB and will display it as such. Images should then appear as you would expect and identical to Photoshop/Lightroom/etc. Why all browsers do not use this common-sense approach as their default is beyond me.

Unfortunately, my shopping cart is only setup to use PHP GD so I cannot get good results at this time. I would really like to see GD updated to leave ICC profiles attached or to have the option of adding a simple sRGB profile on export.

More info here: http://www.gballard.net/psd/go_live_page_profile/embeddedJPEGprofiles.html#

Sewel