Serving WebP Images

The CMS Questions
1

Hello,

New to kirby, we choose this CMS for it’s flexibility and low server print, for a project with a low carbon indice.
In this way, Webp image would be a good choice to reduce global pages weight, but it seems not so easy to implement.
We plan to use this plugin : https://github.com/HashandSalt/kirby3-webp
All images source will be uploaded in panel in jpeg/png format.

Related images to texts are called like this :

<?php if($image = $page->cover()->toFile()): ?>
 <img src="<?= $image->url() ?>" alt="">
<?php endif ?>

or

<?php if($image = $page->visualhead()->toFile()): ?>
 <img src="<?= $image->resize(600)->url() ?>" alt="">
<?php endif ?>

But what would be the best way to serve webp image in front to build something like this :

<picture>
  <source srcset="my-image.webp" type="image/webp">
  <img src="my-image.png" alt="Visual">
</picture>

Thank you for your help.
Scott

2

Welcome to the comunity.

My plugin contains snippets for this already to go which will use the webp images and setup a jpeg fall back.

<?php snippet('webp', ['sizes' => [1920, 1140, 640, 320], 'src' => 'yourimage.webp', 'type' => 'png', 'class' => 'picturetagclass', 'width' => 800, 'height' => 600]) ?>

You can call this on a loop of files too, just replace the src attribute with the variable name from your loop.

'src' => $image

Enjoy Kirby and the plugin :slight_smile:

3

Thank you for your return.
Your plugin works great.

Just 2 or 3 things :
It seems that alt variable doesn’t work. Always empty in my case.
Not sure if variant sources are required, just one tag source for webp plus one img tag as fallback would be acceptable.
Could it possible to add a variable to specify crop or resize ?

Thank you