# Conversion to WebP

**URL:** <https://discourse.gohugo.io/t/conversion-to-webp/50347>\
**Category:** support\
**Tags:** images\
**Created:** [June 19, 2024, 7:55pm UTC](https://discourse.gohugo.io/t/conversion-to-webp/50347 "2024-06-19T19:55:34Z")\
**Posts on this page:** 1\
**Showing post:** 3

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [June 19, 2024, 9:06pm UTC](https://discourse.gohugo.io/t/conversion-to-webp/50347/3 "2024-06-19T21:06:12Z")

</div>

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](https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/_default/_markup/render-image.html) and add a couple of lines:

> **layouts/\_default/\_markup/render-image.html**
>
> ```plaintext
> {{- $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)) -}}
> <img
> {{- range $k, $v := $attributes -}}
> {{- if $v -}}
> {{- printf " %s=%q" $k $v | safeHTMLAttr -}}
> {{- end -}}
> {{- end -}}>
> {{- /**/ -}}
> 
> ```

The markdown image must be a [page resource](https://gohugo.io/getting-started/glossary/#page-resource) or a [global resource](https://gohugo.io/getting-started/glossary/#global-resource).

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

> **hugo.toml**
>
> ```plaintext
> [[module.mounts]]
> source = 'assets'
> target = 'assets'
> 
> [[module.mounts]]
> source = 'static'
> target = 'assets'
> 
> ```

---

_[View the full topic](https://discourse.gohugo.io/t/conversion-to-webp/50347)._