Kirby CMS Thumbnail API reduces the saturation of images

In both Kirby CMS 3.5.6 and 3.6 I’ve tested the Thumbnail API to serve images with a srcset pre-defined in the config.php -> thumbs object. The original file through image.jpg delivers an asset similar with the original file with the correct balance of colors. While the ones generated through Thumbnails API image-400x.jpg have a reduced saturation than the original.

I’ve temporarily ignored this problem by increasing the saturation of all images via CSS filter: saturate(1.30); but I don’t like this solution as I would have some original files being delivered resized from the Thumbnails API, and others the original file.

I’ve tried:

  • Smaller Images
  • Different Format
  • Different Thumbs Driver (im, gd)
  • Interlace on and off

Maybe I’m doing something wrong here, this is an amazing feature by Kirby CMS it works very smoothly and it’s amazingly intuitive, I would just like to see this fixed.

Thanks a lot in advance!

Hm, 3.6.1.x should preserve color profiles as per this PR, at least for jpeg, if I understand it correctly:

(And I would expect the saturation issue to be due to missing color profiles). This requires the IM driver though.

That worked, wasn’t aware that might be the color profiles :man_facepalming:

Thank you so much (:

Seems this is still a thing?

The images are all in Jpg with color profile “Display P3” on Mac.
All generated webp images have this washed out effect.

comparsion_jpg_webp

My images are renderd with the thumb() function and have this as default setting in the config:

'thumbs' => [
  'format' => 'webp',
  'presets' => [
    'default' => ['width' => 1200, 'quality' => 60]
  ]
],

Any recommendations?

Some suggestions:

  • try using ImageMagick instead of gd, that should have better support of colors
  • Upload the images as sRGB directly, 95% of your users will always see them washed out anyway
  • don’t convert them to webp (I think webp and png both only support sRGB as that’s the only color profile considered „web-safe“)
  1. Will look into it, but seems on Ionos shared webhosting there is only GD.
  2. No option - Because the client has a strict workflow
  3. No option - Webp is much more efficient than others

Hello there,

I was wondering if anyone found a solution here?

Here’s the kind of difference I can see between original photo and the one generated in media folder with ->srcset() (jpg files)

Quiet a big difference imho. For the moment, I’ll use @Rafael_Goncalves trick by pushing saturation with CSS but not satisfied neither by this solution.

This is on Kirby 4.4.1.

Is that with ImageMagick or GD?

Hi @ImaCrea ,

I’ve been fiddling with this as well and my conclusion is that it’s only possible to maintain the color profile when using ImageMagick as your thumb driver.

I got the pointer to the solution from hatsumatsu’s post : Image thumbnails are converted from P3 to sRGB. · Issue #6805 · getkirby/kirby · GitHub

My understanding is Kirby uses GD as it’s default driver and GD does not retain the embedded color profile when converted; so you need to use ImageMagick by specify it in your config.php file as such:

return [
  'thumbs' => [
    'driver' => 'im'
  ]
];

Check if ImageMagick is available on host:
I’m on a shared host so I needed to check the host has ImageMagick extension available which I did with a small php script I uploaded to my web host and it looks like this:

<?php
// Check PHP version
echo "PHP Version: " . phpversion() . "<br>";

// Check if the Imagick extension is loaded
if (extension_loaded('imagick')) {
    echo "ImageMagick (Imagick extension) is installed.<br>";
    
    // Create an Imagick object to confirm functionality
    $imagick = new Imagick();
    echo "Imagick version: " . $imagick->getVersion()['versionString'] . "<br>";
} else {
    echo "ImageMagick (Imagick extension) is NOT installed.<br>";
}

// Check if the 'convert' command is available in shell
exec("convert -version", $output, $return_var);
if ($return_var === 0) {
    echo "ImageMagick CLI is available.<br>";
    echo "CLI Version: " . implode("<br>", $output) . "<br>";
} else {
    echo "ImageMagick CLI is NOT available.<br>";
}

// Check loaded PHP extensions
echo "<br>Loaded PHP Extensions:<br>";
echo implode(", ", get_loaded_extensions()) . "<br>";

// Check server information
echo "<br>Server Information:<br>";
echo "Server Software: " . $_SERVER['SERVER_SOFTWARE'] . "<br>";
echo "Server Name: " . $_SERVER['SERVER_NAME'] . "<br>";
?>

Once you’ve uploaded it to the server then visit the url and you should see something similar to:

PHP Version: 8.2.27
ImageMagick (Imagick extension) is installed.
Imagick version: ImageMagick 6.9.11-60 Q16 x86_64 2021-01-25 https://imagemagick.org

Local dev:

If you are working locally then be sure you have ImageMagick convert installed and also make sure you add the path to convert to Kirby’s config.php file as such:

'thumbs' => [
        'quality' => 100,
        'driver' => 'im',
        'bin' => '/opt/homebrew/bin/convert',
        'threads' => 2
    ],

Conclusion:
Now when I upload webp images with Display P3 color profiles they are retained :slight_smile: so while I’ve not checked it on my live server I suspect it will work just as well.

References:

1 Like

Note that the PHP imagick extension is NOT needed/is not used by Kirby. Kirby uses ImageMagick directly on the command line via exec(), so you require ImageMagick installed on the server and exec() must be enabled.

1 Like

argh right, I was not aware.

I’m on a shared host and the exec is part of the disable_functions when I check my phpinfo.

Is there anyway to use the extension instead?
this is very new to me so any help would be appreciated :slight_smile:

Should be possible via a custom thumb driver, but that requires some coding.

1 Like

chatGPT to the ‘rescue’ :slight_smile: