Problems with PNG to WEBP

1

Hi all,

i am currently building a website and do experience some performance issues for the thumbs: the JPG files are output as WEBP thumbs with the correct (smaller) size, which is specified in a srcset in the .config. For PNGs, the srcset is also created and the images are displayed as .webp files BUT they are the original size (which is too big) and when downloading it’s still a PNG file. So the srcset doesn’t have any effect on them.

I have Image Magick as driver:

'thumbs' => [
    'driver' => 'im',
    'srcsets' => …

Do I have to specify the location of the Image Magick or manually install it? PHPinfo shows that the imagick module (3.7.0) is enabled. Server (PHP 8.1) is running on GoDaddy.

Also, since the srcset works for JPG image I guess Image Magick is working, isn’t it?

Link to the website.

Any help would be highly appreciated. Thanks a lot!

Best
L

2

Hm, in general it seems to work, even for some of the png files.

The PHP imagick module is irrelevant here, Kirby uses the ImageMagick library on the CLI (as separate software which needs to be installed on the server and seems to be present, otherwise the thumbs wouldn’t be created).

If I recall correctly, someone else recently had a similar issue which only affected .png files but not all.

3

Thanks for checking!
Yes, it’s really weird. Could transparency/alpha channel be an issue?

4

Hi there,
I just stumbled across your question and someone I know just had the same issue (I guess). We found out that the color-profile in the png-file was the issue. The files had just normal sRGB profile embedded, but this was causing the trouble.

Bildschirmfoto 2023-10-26 um 15.04.37
Bildschirmfoto 2023-10-26 um 15.04.371828×134 24.2 KB

Resaving the files without embedded profile did the trick for him, so maybe this will help you as well.

Cheers
Tom

5

Hey, thanks for your answer!

That’s really interesting. I think with imagick it’s possible to remove profiles from images—but I don’t have a good idea how to integrate this in Kirby.

Maybe anyone has an approach for it?

Best
L

6

Sorry but I don’t know how to do that, he just resaved the images with Photoshop. But with al large amount of images this probably not the best solution.

7

Could probably batch process the files to fix the profiles with a tool like xconvert.

I’ve done it in the past recursibely on the command line with imagemagick, and got it to rip through the kirby content folder. Unfourtantly i cant remember the exact command but a bit of googling should sort it.

8

Even though its not the most efficient way of doing it I added this piece of code to my image processing pipeline:

try {
  $image->thumb($options)->html();
} catch(Exception $e) {
  if($e->getMessage() == "imagecreatefromstring(): gd-png: libpng warning: iCCP: known incorrect sRGB profile") {
    if (extension_loaded('imagick')) {
      $imImage = new Imagick();
      $imImage->readImage($image->realpath());
      file_put_contents($image->realpath(), $imImage);
      $image->thumb($options)->html();
    }
  }
}

I just resave the file and then create the thumb in the media file with the new file, which works fine for me.