# Resize or convert images to WebP conditionally

**URL:** <https://discourse.gohugo.io/t/resize-or-convert-images-to-webp-conditionally/53057>\
**Category:** support\
**Tags:** images\
**Created:** [January 8, 2025, 10:45am UTC](https://discourse.gohugo.io/t/resize-or-convert-images-to-webp-conditionally/53057 "2025-01-08T10:45:01Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![hoanguyenn2015](https://avatars.discourse-cdn.com/v4/letter/h/839c29/32.png) [@hoanguyenn2015](https://discourse.gohugo.io/u/hoanguyenn2015)\
**Post date:** [January 8, 2025, 10:45am UTC](https://discourse.gohugo.io/t/resize-or-convert-images-to-webp-conditionally/53057/1 "2025-01-08T10:45:01Z")

</div>

I’m trying converting all images to webp format and resizing them to a maximum width of 600px. I would like to keep the original size if the image is already less than 600px wide. Markdown posts still use original images (bundle resources).

Can anyone share a code snippet with me so it can do it automatically, such as an img tag with a webp file and lazy load?

---

<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:** [January 8, 2025, 5:19pm UTC](https://discourse.gohugo.io/t/resize-or-convert-images-to-webp-conditionally/53057/2 "2025-01-08T17:19:31Z")

</div>

> [@hoanguyenn2015](#):
>
> converting all images

Which images?

- Page resources?
- Global resources?
- Remote resources?
- Images in the static directory?

---

<div class="post-metadata">

**Author:** ![hoanguyenn2015](https://avatars.discourse-cdn.com/v4/letter/h/839c29/32.png) [@hoanguyenn2015](https://discourse.gohugo.io/u/hoanguyenn2015)\
**Post date:** [January 9, 2025, 2:18am UTC](https://discourse.gohugo.io/t/resize-or-convert-images-to-webp-conditionally/53057/3 "2025-01-09T02:18:12Z")

</div>

Thanks, it would be images in bundle content posts.

---

<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:** [January 9, 2025, 2:24am UTC](https://discourse.gohugo.io/t/resize-or-convert-images-to-webp-conditionally/53057/4 "2025-01-09T02:24:35Z")

</div>

Assuming you add those images to a page using Markdown image links, you’ll need to implement an [image render hook](https://gohugo.io/render-hooks/images/) based on Hugo’s [embedded image render hook](https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/_default/_markup/render-image.html).

---

<div class="post-metadata">

**Author:** ![Heracles](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/heracles/32/19379_2.png) [@Heracles](https://discourse.gohugo.io/u/Heracles)\
**Post date:** [January 12, 2025, 8:09pm UTC](https://discourse.gohugo.io/t/resize-or-convert-images-to-webp-conditionally/53057/5 "2025-01-12T20:09:31Z")

</div>

Here’s a variation of the image render template I’ve been using, with some adjustments.

- If you’re not using the extended version of Hugo, then images will be resized but not converted to WEBP.
- Although it is possible with Hugo, [remote resources](https://gohugo.io/content-management/image-processing/#remote-resource) won’t be resized or converted by the following code. This can be resource heavy and time consuming if not used with caution.
- GIF images won’t be converted as the library Hugo uses cannot yet handle [animated GIFs](https://github.com/golang/go/issues/53364). Remove the respective condition if that’s not an issue.
- Local SVG images will be embedded within the HTML output, which is opinionated but in my use case permits coloring them with CSS. We’re assuming they contain safe HTML.

```go
<!-- layouts/partials/render-image.html -->
<!-- get image URL from Markdown tag -->
{{- $src := (.Destination | safeURL) -}}
{{ $src = replace $src "./" "" }}
<!-- check .Store.Get "imgwidth" or use default width -->
{{- $imgwidth := .Page.Store.Get "imgwidth" | default 600 -}}
<!-- check if it exists as a page resource -->
{{- with (or ((.Page.Resources.ByType "image").Get $src) ((resources.ByType "image").Get $src)) -}}
	<!-- if SVG then output its contents -->
	{{- if strings.HasSuffix $src ".svg" -}}
		{{ .Content | safeHTML }}
	{{- else -}}
		{{ $resized := . }}
		<!-- resize if wider than "imgwidth" but if GIF file then avoid resizing animations; WebP animations not yet supported; see upstream ticket: https://github.com/golang/go/issues/53364 -->
		{{ if and (gt .Width $imgwidth) (ne .MediaType.SubType "gif") }}
			{{ if hugo.IsExtended }}
				{{- $resized = .Resize (print $imgwidth "x webp") -}}
			{{ else }}
				{{- $resized = .Resize (print $imgwidth "x") -}}
				{{ warnf "Missing Hugo Extended, in partial render-image.html" }}
			{{ end }}
		{{ end }}
		<img src="{{ $resized.RelPermalink }}"
		width="{{ $resized.Width }}"
		height="{{ $resized.Height }}"
		{{ with $.PlainText }} alt="{{ . }}" {{ end }}
		{{ with $.Title }} title="{{ . | plainify | htmlEscape }}" {{ end }}
		{{- range $k, $v := $.Attributes -}}
			{{- if $v -}}
				{{- printf " %s=%q" $k ($v | htmlEscape) | safeHTMLAttr -}}
			{{- end -}}
		{{- end -}}
		loading="lazy" decoding="async" />
		<!-- closing tag on img intented, for compatibility with XML output -->
	{{- end -}}
{{- else -}}
	<!-- or otherwise its an external resource so load the URL -->
	<img src="{{ .Destination | safeURL }}"
	{{ with $.PlainText }} alt="{{ . }}" {{ end }}
	{{ with $.Title }} title="{{ . | plainify | htmlEscape }}" {{ end }}
	{{- range $k, $v := .Attributes -}}
		{{- if $v -}}
			{{- printf " %s=%q" $k ($v | htmlEscape) | safeHTMLAttr -}}
		{{- end -}}
	{{- end -}}
	loading="lazy" decoding="async" data-src="external" />
{{- end -}}

```

I hope that helps. Notes to improve any of the above, welcome!

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [July 2, 2025, 2:14pm UTC](https://discourse.gohugo.io/t/resize-or-convert-images-to-webp-conditionally/53057/6 "2025-07-02T14:14:47Z")

</div>

Closed on July 2, 2025, 2:14pm UTC

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