<!-- get image URL from Markdown tag -->
{{- $src := (.Destination | safeURL) -}}
<!-- split # fragment (used for CSS classes) and keep clean URL -->
{{- $fragments := (split $src "#") -}}
{{- $src = index ($fragments) 0 -}}
<!-- resize if wider than .Scratch.Get "imgwidth" -->
{{- $imgwidth := .Page.Scratch.Get "imgwidth" | default 800 -}}
<!-- get actual filename -->
{{- $src = path.Base $src -}}
<!-- check if it exists as a page resource -->
{{- with (.Page.Resources.ByType "image").GetMatch (printf "**/%s" $src) -}}
	{{ $resized := . }}
	{{ if (gt .Width $imgwidth) }}
		{{ if hugo.IsExtended }}
			{{- $resized = .Resize (print $imgwidth "x webp") -}}
		{{ else }}
			{{- $resized = .Resize (print $imgwidth "x") -}}
		{{ end }}
	{{ end }}
	<!-- if a JPEG (certain to be opaque) generate a low resolution placeholder to use as background -->
	{{ $placeholder := "" }}
	{{- if or (eq .MediaType.SubType "jpg") (eq .MediaType.SubType "jpeg") }}
		{{ $placeholder = .Resize "48x q20 jpg Gaussian" }}
	{{ end -}}
	<!-- if a GIF file, then revert to original to avoid resizing animations; WebP animations don't work -->
	{{- if (eq .MediaType.SubType "gif") }}
		{{ $resized = . }}
	{{ end -}}
	<img src="{{ $resized.RelPermalink }}"
	width="{{ $resized.Width }}"
	height="{{ $resized.Height }}"
	{{ with $placeholder }}style="
		background-image: url('data:image/jpg;base64,{{ .Content | base64Encode }}');
		background-position: 50% 50%;
		background-repeat: no-repeat;
		background-size: cover;"{{ end }}
	alt="{{ $.Text }}" {{ with $.Title }} title="{{ . }}" {{ end }}
	{{ with index ($fragments ) 1 }}class="{{ . }}" {{ else }}class="single-post-image" {{ end }}
	loading="lazy"
	decoding="async"
	>
<!-- or otherwise simply load the URL -->
{{- else -}}
	<img src="{{ .Destination | safeURL }}"
	alt="{{ .Text }}" {{ with .Title }} title="{{ . }}" {{ end }}
	{{ with index ($fragments ) 1 }}class="{{ . }}" {{ else }}class="single-post-image" {{ end }}
	loading="lazy"
	decoding="async"
	>
{{- end -}}