Thumbs not created properly (webp & avif)

Kirby 3 Questions 🤔
1

I am having problems generating proper webp and avif files locally and on a hosting environment.

Server is running php 7.4, and I can confirm it has ImageMagick installed.

The files that are created in the media folder remain the original png/jpg image, just a different width/height. No compression takes place even though there is a quality reduction in the config file. They do however have the correct file extension webp/avif.

I have tested changing driver to ‘gd’, and just trying webp (without avif src set), but problem remains.

Within config file:

'thumbs' => [
      'driver' => 'im',
      'srcsets' => [
        'default' => [
          '380w' => ['width' => 360, 'quality' => 50],
          '528w' => ['width' => 528, 'quality' => 50],
          '1000w' => ['width' => 1600, 'quality' => 5],
        ],
        'default_webp' => [
          '380w' => ['width' => 360, 'quality' => 50, 'format' => 'webp'],
          '528w' => ['width' => 528, 'quality' => 50, 'format' => 'webp'],
          '1000w' => ['width' => 1600, 'quality' => 50, 'format' => 'webp'],
        ],
        'default_avif' => [
          '380w' => ['width' => 360, 'quality' => 40, 'format' => 'avif'],
          '528w' => ['width' => 528, 'quality' => 40, 'format' => 'avif'],
          '1000w' => ['width' => 1600, 'quality' => 40, 'format' => 'avif'],
        ]
      ]
    ],

Image snippet:

  <picture>
    <source
      type="image/avif"
      srcset="<?= $image->srcset('default_avif') ?>"
      sizes="(max-width: 735px) 100vw, 736px"
    />
    <source
      type="image/webp"
      srcset="<?= $image->srcset('default_webp') ?> "
      sizes="(max-width: 735px) 100vw, 736px"
    />
    <img
      srcset="<?= $image->srcset() ?>"
      sizes="(max-width: 735px) 100vw, 736px"
      src="<?= $src ?>"
      alt="<?= $image->alt() ?>"
      loading="lazy"
      decoding="async"
    />
  </picture>

Any clues on what to check?

2

Without using webp/avif and using the im driver, are thumbs generated as expected?

When using the convert command manually on the command line, does converting to webp/avif work?

3

Hmmm, I have just tested and no, without using webp/avif and using the im driver, thumbs are not being generated as expected. For example: an image with 'quality' => 5 is being generated 3x heavier than an image with 'quality' => 100.

Tested with gd driver too and I am getting the same results.

Running these tests on the server as I don’t have ImageMagick installed locally.

The server is one I have used successfully for other projects.

4

So this is a server that you control and where all sites share the same PHP settings?

Again, have you tried to use the convert command on the command line? Have you tried to add the path to the convert binary to your config?

As regards gd library, what does phpinfo() say regarding webp support? Is it enabled?

Bildschirmfoto 2022-04-03 um 22.50.53
Bildschirmfoto 2022-04-03 um 22.50.531296×968 140 KB

5

This particular one is a shared hosting environment, but yes I have all sites currently running php 7.4.

Not sure how to do this on the cl, I am a bit limited in that respect.

Actually, no, just checked and webp support is not and cannot be enabled on server.

Tried locally and webp works fine with gd library.

Because hosting environment does not support webp, I am just going to push on without that support for now. However it is still creating incorrect thumbs with this code both locally and on server. Heavier image when 'quality' => 5, than when 'quality' => 100.

    'thumbs' => [
      'srcsets' => [
        'default' => [
          '380w' => ['width' => 360, 'quality' => 50],
          '528w' => ['width' => 528, 'quality' => 50],
          '1000w' => ['width' => 1600, 'quality' => 5],
        ],
        'default_halfwidth' => [
          '380w' => ['width' => 360, 'quality' => 50],
          '528w' => ['width' => 528, 'quality' => 50],
          '1000w' => ['width' => 1000, 'quality' => 50],
        ]
      ]
    ],

<picture>
    <img
      srcset="<?= $image->srcset() ?>"
      sizes="(max-width: 735px) 100vw, 736px"
      src="<?= $src ?>"
      alt="<?= $image->alt() ?>"
      loading="lazy"
      decoding="async"
    />
  </picture>
6

Update: This problem only relates to PNGs, JPGs are being compressed properly.

I have checked and PNG support is enabled for gd.

7

Have you tested with several different png images? Are the original png files actually larger than your target sizes?

Maybe this happens when the original images are already compressed.

But leaving quality aside, are the thumbs actually created in the correct dimensions? And is the file size smaller than that of the original images (given that dimensions of the original are actually larger than the target size).