Convert 'thumbnail' image to webp format

I’m trying to upload an image to convert it to webp format.

FrontMatter looks like this:

title: "My first post"
thumbnail: "/path/to/my_image.jpg"

In Hugo Template, I’m doing this

{{ if (resources.GetMatch .Params.thumbnail) }}
   <img src="{{ ((resources.GetMatch .Params.thumbnail).Fit `355x200 png q100`).RelPermalink }}" />
{{ end }}

But there are no results, <img src=... is not displayed
It’s like resources.GetMatch can’t load the thumbnail image.

Does anyone have a trick to achieve this I am overlooking?

Environment Details

$ hugo env
hugo v0.121.1-00b46fed8e47f7bb0a85d7cfc2d9f1356379b740+extended windows/amd64 BuildDate=2023-12-08T08:47:45Z VendorInfo=gohugoio

See the requesting help guidelines

resources.GetMatch returns a resource, not a URL. Use the .Permalink method on the returned resource, as shown in the documentation for Fit.

And if you want a webp image, you should perhaps not use png as target format.

Hmm, I’m a beginner, there’s something I’m missing.

As shown in the documentation for Fit, I do

{{ with resources.Get .Params.thumbnail }}
  {{ with .Fit "200x200" }}
    <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
  {{ end }}
{{ end }}

But unfortunately same result, <img src=... is not displayed

Well, that’s not what you posted first.

As @Arif said: Post a link to your repository. Without seeing all of your code, no one can help you reliably. Perhaps resources.Get doesn’t return a resource because the “/path/to/my_image.jpg” doesn’t point to where you think it points? We can’t know, we can’t check.

Make sure to keep the image you want Hugo to process in assets directory. The image processing will work only if the resource is present in assets directory or a directory mounted to assets directory. More information here.