1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
{{/*
Taken from https://www.brycewray.com/posts/2022/06/responsive-optimized-images-hugo/
*/}}
{{- $respSizes := .Site.Params.imageSizes -}}
{{- $src := .Get "src" -}}
{{- $source := resources.Get $src -}}
{{- $alt := .Get "alt" -}}
{{- $divClass := .Get "divClass" -}}
{{/*
The styling in $imgClass, below, makes
an image fill the container horizontally
and adjust its height automatically
for that, and then fade in for the LQIP effect.
Feel free to adjust your CSS/SCSS as desired.
*/}}
{{- $imgClass := "animate-fade" -}}
{{- $dataSzes := "(min-width: 1024px) 100vw, 50vw" -}}
{{/*
Now we'll create the 20-pixel-wide LQIP
and turn it into Base64-encoded data, which
is better for performance and caching.
*/}}
{{- $LQIP_img := $source.Resize "20x jpg" -}}
{{- $LQIP_b64 := $LQIP_img.Content | base64Encode -}}
{{/*
$CFPstyle is for use in styling
the div's background, as you'll see shortly.
*/}}
{{- $CFPstyle := printf "%s%s%s%v%s" "background: url(data:image/jpeg;base64," $LQIP_b64 "); background-size: cover; background-repeat: no-repeat; width: " $source.Width "px;" -}}
{{/*
Then, we create a 640-pixel-wide JPG
of the image. This will serve as the
"fallback" image for that tiny percentage
of browsers that don't understand the
HTML `picture` tag.
*/}}
{{- $actualImg := $source.Resize "640x jpg" -}}
<div class="picture{{with $divClass}} {{.}}{{end}}" style="{{ $CFPstyle | safeCSS }}">
{{/*
Now we'll build the `picture` which modern
browsers use to decide which image, and
which format thereof, to show. Remember to
put `webp` first, since the browser will use
the first format it **can** use, and WebP files
usually are smaller. After WebP, the fallback
is the universally safe JPG format.
*/}}
<a href="{{ $source.RelPermalink }}">
<picture>
<source
type="image/webp"
srcset="
{{- with $respSizes -}}
{{- range $i, $e := $respSizes -}}
{{- if ge $source.Width . -}}
{{- if $i }}, {{ end -}}{{- ($source.Resize (printf "%vx%v" $e " webp") ).RelPermalink }} {{ . }}w
{{- end -}}
{{- end -}}
{{- end -}}"
sizes="{{ $dataSzes }}"
/>
<source
type="image/jpeg"
srcset="
{{- with $respSizes -}}
{{- range $i, $e := . -}}
{{- if ge $source.Width . -}}
{{- if $i }}, {{ end -}}{{- ($source.Resize (printf "%vx%v" . " jpg") ).RelPermalink }} {{ . }}w
{{- end -}}
{{- end -}}
{{- end -}}"
sizes="{{ $dataSzes }}"
/>
<img class="{{ $imgClass }}"
src="{{ $actualImg.RelPermalink }}"
width="{{ $source.Width }}"
height="{{ $source.Height }}"
alt="{{ $alt }}"
loading="lazy"
/>
</picture>
</a>
</div>
|
