Conversion to WebP


I have recently started learning Hugo, and I am really enjoying it. What I liked the most is the image conversion feature that converts images from other formats to WebP on the fly – it’s truly a great solution!

However, I still haven’t figured out how to implement this not only for the template but also for images inserted in a Markdown file:


I found this guide (posted on Jul 04, 2022), but I encountered errors when trying to follow it. It’s possible that the guide is outdated or not functioning correctly:

Resize All Images Guide

Does it work for you, and should it work at all?
Is there an elegant solution in the form of a shortcode or a ready-made template for /layouts/_default/_markup/render-image.html?

I have exhausted all my options on Google and this forum today, so I decided to try my luck here…
I apologize in advance if the question is silly and the solution was obvious.

If all you want to do is convert every image that you reference in Markdown to the WebP format, I’d start with Hugo’s embedded image render hook and add a couple of lines:

{{- $u := urls.Parse .Destination -}}
{{- $src := $u.String -}}
{{- if not $u.IsAbs -}}
  {{- $path := strings.TrimPrefix "./" $u.Path }}
  {{- with or (.PageInner.Resources.Get $path) (resources.Get $path) -}}
    {{- with .Process "webp" -}}
      {{- $src = .RelPermalink -}}
      {{- with $u.RawQuery -}}
        {{- $src = printf "%s?%s" $src . -}}
      {{- end -}}
      {{- with $u.Fragment -}}
        {{- $src = printf "%s#%s" $src . -}}
      {{- end -}}
    {{- end -}}
  {{- end -}}
{{- end -}}
{{- $attributes := merge .Attributes (dict "alt" .Text "src" $src "title" (.Title | transform.HTMLEscape)) -}}
  {{- range $k, $v := $attributes -}}
    {{- if $v -}}
      {{- printf " %s=%q" $k $v | safeHTMLAttr -}}
    {{- end -}}
  {{- end -}}>
{{- /**/ -}}

The markdown image must be a page resource or a global resource.

If you really, really want to place your images somewhere in the static directory, mount the static directory to assets:

source = 'assets'
target = 'assets'

source = 'static'
target = 'assets'
1 Like

Great! Thank you very much, everything worked perfectly - just what I was looking for!

The only thing is that it works on my local computer, but it refused to build on Cloudflare. Looks like I’ll have to create a public github :slight_smile:

At any rate, thank you for the hint!

2024-06-20T12:01:50.715038Z Cloning repository...

2024-06-20T12:01:51.636852Z From

2024-06-20T12:01:51.637301Z * branch 1028e899c746532a4a982c1884f29827d99cde87 -> FETCH_HEAD


2024-06-20T12:01:51.672712Z HEAD is now at 1028e89 back webp



2024-06-20T12:01:51.761562Z Using v2 root directory strategy

2024-06-20T12:01:51.786975Z Success: Finished cloning repository files

2024-06-20T12:01:53.789612Z Checking for configuration in a wrangler.toml configuration file (BETA)


2024-06-20T12:01:53.90848Z No wrangler.toml file found. Continuing.

2024-06-20T12:01:54.056282Z Detected the following tools from environment: npm@9.6.7, nodejs@18.17.1

2024-06-20T12:01:54.056904Z Installing project dependencies: npm clean-install --progress=false


2024-06-20T12:01:56.821633Z added 141 packages, and audited 142 packages in 2s


2024-06-20T12:01:56.821982Z 25 packages are looking for funding

2024-06-20T12:01:56.822113Z run `npm fund` for details


2024-06-20T12:01:56.823791Z 1 high severity vulnerability


2024-06-20T12:01:56.824091Z To address all issues, run:

2024-06-20T12:01:56.824219Z npm audit fix


2024-06-20T12:01:56.824431Z Run `npm audit` for details.

2024-06-20T12:01:56.837169Z Executing user command: hugo

2024-06-20T12:01:57.353764Z Start building sites …

2024-06-20T12:01:57.353999Z hugo v0.118.2-da7983ac4b94d97d776d7c2405040de97e95c03d+extended linux/amd64 BuildDate=2023-08-31T11:23:51Z VendorInfo=gohugoio


2024-06-20T12:01:57.370875Z Total in 21 ms

2024-06-20T12:01:57.386852Z Error: error building site: render: failed to render pages: render of "home" failed: "/opt/buildhome/repo/layouts/index.html:163:14": execute of template failed: template: index.html:163:14: executing "main" at <partial "top.html" .>: error calling partial: "/opt/buildhome/repo/layouts/partials/top.html:320:28": execute of template failed: template: partials/top.html:320:28: executing "partials/top.html" at <markdownify>: error calling markdownify: "/opt/buildhome/repo/content/": "/opt/buildhome/repo/layouts/_default/_markup/render-image.html:5:25": execute of template failed: template: _default/_markup/render-image.html:5:25: executing "_default/_markup/render-image.html" at <.PageInner.Resources.Get>: can't evaluate field PageInner in type goldmark.imageLinkContext

2024-06-20T12:01:57.387344Z Failed: Error while executing user command. Exited with error code: 1

2024-06-20T12:01:57.388947Z Failed: build command exited with code: 1

2024-06-20T12:01:58.299179Z Failed: error occurred while running build command

You’re building with an older Hugo version on Cloudflare.

You need to use v0.125.0 or later.

You are the best!
I knew that the problem was simpler and quite close))
Thanks again!

1 Like

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.