AVIF files not resized or converted when using thumbs

Kirby 3 Solved ✅
1

Hi,

I am trying to implement responsive images on a new site. I have this setup in config.php:

'thumbs' => [
      'srcsets' => [
          'default' => [
              '300w'  => ['width' => 300],
              '600w'  => ['width' => 600],
              '900w'  => ['width' => 900],
              '1200w' => ['width' => 1200],
              '1800w' => ['width' => 1800],
              '2300w' => ['width' => 2300],
              '2880w' => ['width' => 2880],
          ],
          'avif' => [
            '300w'  => ['width' => 300, 'format' => 'avif'],
            '600w'  => ['width' => 600, 'format' => 'avif'],
            '900w'  => ['width' => 900, 'format' => 'avif'],
            '1200w' => ['width' => 1200, 'format' => 'avif'],
            '1800w' => ['width' => 1800, 'format' => 'avif'],
            '2300w' => ['width' => 2300, 'format' => 'avif'],
            '2880w' => ['width' => 2880, 'format' => 'avif'],
          ],
          'webp' => [
            '300w'  => ['width' => 300, 'format' => 'webp'],
            '600w'  => ['width' => 600, 'format' => 'webp'],
            '900w'  => ['width' => 900, 'format' => 'webp'],
            '1200w' => ['width' => 1200, 'format' => 'webp'],
            '1800w' => ['width' => 1800, 'format' => 'webp'],
            '2300w' => ['width' => 2300, 'format' => 'webp'],
            '2880w' => ['width' => 2880, 'format' => 'webp'],
          ],
      ]
    ],

And the following on my page (using an image from assets for now):

<?php
  $image = asset('assets/img/logo.png');
?>

<picture>
    <source   
      srcset="<?= $image->srcset('avif') ?>"
      sizes="(min-width: 640px) 500px, 80vw"
      type="image/avif"
    >
    <source
      srcset="<?= $image->srcset('webp') ?>"
      sizes="(min-width: 640px) 500px, 80vw"
      type="image/webp"
    >
    <img
      class="h-auto w-[80vw] sm:max-w-[500px] text-center"
      alt="Description"
      src="<?= $image->resize(1200)->url() ?>"
      srcset="<?= $image->srcset() ?>"
      sizes="(min-width: 640px) 500px, 80vw"
      width="<?= $image->resize(2880)->width() ?>"
      height="<?= $image->resize(2880)->height() ?>"
    >
  </picture>

This is generating the resized image (png) and webp images just fine, but the avif images that are generated are all just copies of the original .png at original size - there is no resizing or file type conversion. It is changing the extension to .avif and adding the size (e.g. -300x), but the file isn’t changing.

I have asked the hosts and they have said GD is running on the server. If anyone has any thoughts that would be super

Mike

2

I think you have to use imagemagick for avif?

3
4

If you switch to IM make sure that exec() is allowed on the server and you have the correct path to where it is installed. Sometimes exec() is switched off and Kirby needs it to use IM.

5

Thanks for the info @Norreco. I am using PHP 8.1 so GD should support avif as a format. Currently chatting to host about it, hopefully will get somewhere with it!

1 Like
6

PHP 8.1 can support avif, it has however to be explicitly compiled with support for it, and many hosters did not

You can check for support of the avif format with the

var_dump(gd_info());

command.

7

Hi - thanks for that command tip. My hosts don’t currently have it enabled, but hopefully I can get that resolved soon.

8

@mikeharrison — did you get anywhere with this?

I’m running PHP 8.1 on a server which according to gd_info() does have AVIF support, but still the AVIF files do not get generated by Kirby. They seem to get added to the /.jobs folder but don’t actually get generated. No errors as far as I can tell…

Does anyone have any ideas about what else Kirby might need to generate these with GD?

9

I had a quick look at the SimpleImage class and it doesn’t support .avif yet, see also: Add AVIF support · Issue #260 · claviska/SimpleImage · GitHub

10

Thanks @texnixe, so is the advice still to use ImageMagick as the thumbs driver to generate AVIF images?

11

Yes, seems to be.

1 Like
12

Hi there, I can confirm from my experience that GD doesn’t support AVIF thumbnails unless specifically turned on. And most hosting providers still haven’t turned it on. It must be turned on, in default setup is turned off.

With Imagemagic it works out of the box.

13

@mrfreedom As I wrote above, that is not the only problem. Even if turned on by your provider, it still wouldn’t work because it is not supported by SimpleImage, the library used by Kirby’s GD driver.

1 Like
14

Ah, I see…