Converting JPEG JPG and PNG to WebP

I’d like to improve the performance of my website. I’ve looked at this Cookbook:

But making my images ‘responsive’ is way beyond my ability. So, instead, I am wondering if there is an easy way to get Kirby to automatically convert and serve up my JPG, JPEG and PNG images as WebP (without all the responsive stuff)?

I’ve also looked into the WebP plugin:

But don’t understand a word of the Help file.

I guess I’m hoping I can simply turn something on, somewhere in Kirby?

Hey,

maybe this will help

Cheers

Looks promising. Although what is a ‘thumb’? I’ve done a search on the Kirby website and can’t find any description of what a thumb is. I presume thumb is short for thumbnail? Are thumbnails the images used inside the Panel? I want to convert the images uses on my website, not the thumbnails used in the Panel.

you can use the thumbs in you template like this

So a ‘thumb’ is a way to add images to a website. Nothing to do with small thumbnails used in the Panel? Calling it thumb seems very misleading? The Kirby instructions assume we all know what a thumb is.

Is a thumb different from a thumbnail? I can see on the Forum lots of talk about both, but I’m not sure if they are the same thing, or different things?

Yes.

Yes and no. The Panel create thumbnails of your images for preview purposes using the same thumb()method that you would use to create thumbnails of your images on the frontend.

With the thumbs method you can leave the size alone and only convert the format.

With the thumbs method you can leave the size alone and only convert the format.

Great.

When are the images converted? Presumably not every time someone visits the site – as this would slow the site down considerably, waiting for the conversion? Once made live, would I have to visit every page of the site to enable the conversion and get the converted images to live in the Media folder?

The image gets converted when the url() method is called. The thumb is created on the first call and not recreated on subsequent calls. There is usually no need to generate all thumbs in advance.

If you want to do that, though, you could loop through all image of the site and call the thumb url. If you have many images, I’d do this on the command line though to prevent running into timeouts.

The image gets converted when the url() method is called. The thumb is created on the first call and not recreated on subsequent calls. There is usually no need to generate all thumbs in advance.

Presumably with each page containing say 10 images, of around 200KB each, this could take many seconds / several minutes, to convert all the images and load? I’m not sure I’d want to be the first person to visit the site and generate the thumbs.

If you want to do that, though, you could loop through all image of the site and call the thumb url.

By loop through, do you mean visit every page of the site, to generate the thumbs, before I upload it to the server?

No, I mean programmatically do a foreach loop over all files.