Hugo has a really way of hooking into the rendering process that I’m using to automatically generate scaled down thumbnails of referenced images. I structure each blog post as a page bundle and render images via ![](image-name.jpg) in the markdown files. By default, hugo will render an image tag with the full sized image which can be rather heavy if it’s a large image. So instead, I set up a render hook for images in layouts/_markup/render-image.html:

{{- $img := .Page.Resources.GetMatch .Destination -}}
{{- $thumb := $img.Resize "800x" -}}
<a href="{{ $img.RelPermalink }}">
<img src="{{ $thumb.RelPermalink }}"
  width="{{ $thumb.Width }}"
  height="{{ $thumb.Height }}"
  {{- with .PlainText }} alt="{{ . }}"{{ end -}}
  {{- with .Title }} title="{{ . }}"{{ end -}}
>
</a>

This automatically creates a resized thumbnail, renders a anchor tag that links to the full sized image, and an image tag with the thumbnail.