WebP & AVIF support via `srcset`

[S1SYPHOS]

Hey there! Do you have any experience with different image formats being used, such as WebP, AVIF, .. ? I find it hard and was wondering, if your plugin could handle it properly :grin:

Let me know if you know or don't know, you know .. Cheers! S1SYPHOS

[johannschopplich]

Since this plugin uses Kirby's default thumbs driver, it is possible. But we will have to wait on Kirby 3.6 and its support for WebP and AVIF first. 🙂

[S1SYPHOS]

I guess - but it's ultimately not up to Kirby, but the software installed server-side, Kirby 3.6 won't stand in the way at least ;)

[carstengrimm]

I am testing with webp and it is already working (showing blurry previews). I think the server requires a webp module and then it will work out of the box.

[johannschopplich]

You are both right. Let me clarify.

The GDLib/SimpleImage driver (default in PHP installations) currently only supports webp, while ImageMagick supports webp and avif. The blurry thumb preview is generated using Kirby's default thumb format.

Starting from version 3.6, Kirby will support alternative thumb file formats (e.g. webp or avif) set via a global option or passed to a thumb-related method:

$image->thumb(['width' => 200, 'format' => 'webp'])

$image->srcset([
  ['width' => 200, 'format' => 'webp'],
  ['width' => 200, 'format' => 'jpg']
])

Thus, you could set the thumbs option globally in Kirby 3.6.

For the plugin, I could create a format option, which would get passed to the thumb call in: https://github.com/johannschopplich/kirby-blurry-placeholder/blob/eae815f529fee70cf421e884c922d8321facd75e/classes/KirbyExtended/BlurryPlaceholder.php#L25 What do you think?

[S1SYPHOS]

I'd like to support your plugin in combination with my kirby3-colorist package, see here, but I'll have to dig into it. it ships a custom thumbdriver & some methods, so I guess the format option applying to 3.6 and up will be useful as soon as support via gd / imagick (especially on shared hosting) arrives.

So, basically, thumbs up :+1:

// Currently my srcset contains webp and avif, so passing string (single format) and array (multiple formats) would be preferable (or always array, even if there's just one format).

[larshoie]

Hey! I love your plugin. Just wondering, are there any updates on this? I would also love to use webp since it's now included in 3.6. I'm using the plugin with your blocks example, is there a simple way to modify this example with the thumbs method and the new features?

[johannschopplich]

@S1SYPHOS @larshoie You can use custom image formats since Kirby 3.6.

To use them inside the image block, set the global thumbs.format option to either webp or avif:

// config.php
return [
    'thumbs' => [
        'format' => 'webp'
    ]
];

You could also change the image block provided by this plugin by adding a second format argument to $image->srcset(), but then you would have to specify which global srcset preset to use in the first argument. Probably more cumbersome than setting a global thumbs format directly.