Can hugo convert all images to WEBP after the update?

support
1

I have all the images stored in static/uploads folder.
Also I grab some images from other urls.

I want hugo to download and convert those images to webp whenever site is published and show them on the website.

Is there any way?

1 Like
2

Not without amending render-image.html. See here

Also, would recommend to let hugo Generate WebP images locally and sync resources/_gen/assets with your git as this will avoid time that will take to gen them on server side like Netlify.

There is also different approach to WebP that was working and I been using before WebP was originally introduced in Hugo 0.83. Yuo can convert all images using following command (on mac):

`find ./ -type f -name '*.png' -exec sh -c 'cwebp -q 75 $1 -o "${1%.png}.webp"' _ {} \;`
  `find ./ -type f -name '*.jpg' -exec sh -c 'cwebp -q 75 $1 -o "${1%.jpg}.webp"' _ {} \;`

You need brew webp for that,

and later call them according to this post in render-image.html

Mine looks as follow:

{{- $image := resources.Get .Destination -}}

  <picture>
    {{ $isJPG := eq (path.Ext .Destination) ".jpg" }}
    {{ $isPNG := eq (path.Ext .Destination) ".png" }}

    {{ if ($isJPG) -}}
      {{ $webp:= resources.Get (replace .Destination ".jpg" ".webp") }}
        <source srcset="{{ $webp.Permalink | safeURL }}" type="image/webp" >
    {{- end }}

    {{ if ($isPNG) -}}
      {{ $webp:= resources.Get (replace .Destination ".png" ".webp") }}
        <source srcset="{{ $webp.Permalink | safeURL }}" type="image/webp" >
    {{- end }}

    <img
      src="{{ $image.Permalink | safeURL }}"
      sizes="100vw"
      alt="{{ .Title }}" title="{{ .Title }}"
      loading="lazy"
      decoding="async"
      width="{{ $image.Width }}"
      height="{{ $image.Height }}"
    />
  </picture>

Using 2nd methiod I got full control on my images and they don’t need to be re-generated when something change etc.

1 Like
3

What you can do is to store the images (or mount it) inside /assets. Then you can use resources.Match to list all the images you want, and then you can convert them to webp and show them.