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