fix: Avoid layout shifts by pre-allocating space for pictures (#248)

So far, images don't set a fixed height for images. This leads to layout
shifts since CSS can only recognize the size of the image when loaded.

By setting the aspect ratio on the `img` element, the browser can
already pre-allocate the necessary space. When the image is loaded, the
layout no longer shifts.

Layout shifts are one of the main complaints in the Google Lighthouse
report:
<img width="1180" height="324" alt="image"
src="https://github.com/user-attachments/assets/227f55a3-b1e5-4aaf-b2b8-b84bf0099da9"
/>

For more information, check the Google recommendations for image
spacing:
https://web.dev/articles/optimize-cls?utm_source=lighthouse&utm_medium=devtools#images-without-dimensions

Resolves #73

---------

Co-authored-by: Robert Schuster <[email protected]>

Author: MoritzWeber0

assets/sass/teaser.scss

@@ -76,7 +76,6 @@
 }
 
 .m-teaser__image img {
-    aspect-ratio: 16/9;
     border-radius: var(--border-radius-l) var(--border-radius-l) 0 0;
     object-fit: cover;
     height: 100%;

layouts/partials/image.html

@@ -13,30 +13,41 @@
 {{- $name := $image.RelPermalink | strings.TrimSuffix (printf ".%s" $image.MediaType.SubType) -}}
 {{- $extension := $image.MediaType.SubType -}}
 
-<picture>
-  {{- $widths := slice -}}
-  {{- if gt $image.Width 500 -}}
-    {{- $widths = $widths | append 500 -}}
-  {{- end -}}
-  {{- if gt $image.Width 800 -}}
-    {{- $widths = $widths | append 800 -}}
-  {{- end -}}
-  {{- if gt $image.Width 1200 -}}
-    {{- $widths = $widths | append 1200 -}}
-  {{- end -}}
-  {{- if gt $image.Width 1500 -}}
-    {{- $widths = $widths | append 1500 -}}
-  {{- end -}}
-  {{- if gt $image.Width 2200 -}}
-    {{- $widths = $widths | append 2200 -}}
-  {{- end -}}
+{{- $widths := slice -}}
+{{- if gt $image.Width 500 -}}
+  {{- $widths = $widths | append 500 -}}
+{{- end -}}
+{{- if gt $image.Width 800 -}}
+  {{- $widths = $widths | append 800 -}}
+{{- end -}}
+{{- if gt $image.Width 1200 -}}
+  {{- $widths = $widths | append 1200 -}}
+{{- end -}}
+{{- if gt $image.Width 1500 -}}
+  {{- $widths = $widths | append 1500 -}}
+{{- end -}}
+{{- if gt $image.Width 2200 -}}
+  {{- $widths = $widths | append 2200 -}}
+{{- end -}}
 
-  {{- $srcset := slice -}}
-  {{- range $i, $width := $widths -}}
-    {{- with $image.Resize (printf "%dx" $width) | resources.Copy (print $name "_" $width "." $extension) -}}
-      {{- $srcset = $srcset | append (printf "%s %dw" .RelPermalink $width) -}}
-    {{- end -}}
+{{- $srcset := slice -}}
+{{- range $i, $width := $widths -}}
+  {{- with $image.Resize (printf "%dx" $width) | resources.Copy (print $name "_" $width "." $extension) -}}
+    {{- $srcset = $srcset | append (printf "%s %dw" .RelPermalink $width) -}}
   {{- end -}}
-  {{- $srcset = $srcset | append (printf "%s %dw" $image.RelPermalink $image.Width) -}}
-  {{- printf "<img src=\"%s\" alt=\"\" loading=\"%s\" srcset=\"%s\" sizes=\"(max-width: 576px) calc(100vw - 3.2rem), (max-width: 768px) 540px, (max-width: 992px) 720px, (max-width: 1200px) 960px, (max-width: 1400px) 1140px, 1320px\">" $image.RelPermalink $loading (delimit $srcset ", ") | safeHTML -}}
-</picture>
+{{- end -}}
+{{- $srcset = $srcset | append (printf "%s %dw" $image.RelPermalink $image.Width) -}}
+
+{{- $styles := "" -}}
+{{- if and $image.Width -}}
+  {{- $styles = printf "aspect-ratio: %d / %d" $image.Width $image.Height -}}
+{{- end -}}
+
+<img
+  src="{{ $image.RelPermalink }}"
+  alt=""
+  loading="{{ $loading }}"
+  srcset="{{ delimit $srcset ", " }}"
+  sizes="(max-width: 576px) calc(100vw - 3.2rem), (max-width: 768px) 540px, (max-width: 992px) 720px, (max-width: 1200px) 960px, (max-width: 1400px) 1140px, 1320px"
+  style="{{ $styles | safeCSS }}"
+>