diff --git a/content/_index.md b/content/_index.md
index 8e8ee5e..cee55b2 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -1,6 +1,11 @@
 # Musikverein Molbergen
 
-![Gruppenfoto des Musikverein Molbergen im Brgerpark Molbergen](ABP_4586.jpeg)
+{{< figure
+    src="ABP_4586.jpeg"
+    alt="Gruppenfoto des Musikverein Molbergen im Bürgerpark Molbergen"
+    fetchpriority="high"
+    loading="eager"
+    >}}
 
 Der Musikverein Molbergen besteht aktuell aus rund 115 aktiven Mitgliedern, 71% davon weiblich. Das Durchschnittsalter der Mitglieder liegt bei 25 Jahren. Der Verein teilt sich in 10 Register auf, die von unserer Dirigentin Ingrid Sieve auf Kurs gehalten werden. Jeden Donnerstagabend finden von 18.30 Uhr – 19.30 Uhr die Proben des Jugendorchesters und von 20:00 Uhr – 22.00 Uhr die Proben des Hauptorchesters im Molberger Pfarrheim statt.
 
diff --git a/layouts/shortcodes/figure.html b/layouts/shortcodes/figure.html
new file mode 100644
index 0000000..3faf5cd
--- /dev/null
+++ b/layouts/shortcodes/figure.html
@@ -0,0 +1,61 @@
+{{ $disableImageOptimization := .Site.Params.disableImageOptimization | default
+false }} {{ if .Get "default" }} {{ partial
+"hugo-embedded/shortcodes/figure-default.html" . }} {{ else }} {{- $url :=
+urls.Parse (.Get "src") }} {{- $altText := .Get "alt" }} {{- $caption := .Get
+"caption" }} {{- $href := .Get "href" }} {{- $class := .Get "class" }} {{-
+$target := .Get "target" | default "_blank" }} {{- $nozoom := .Get "nozoom" |
+default false -}} {{- $loading := .Get "loading" | default "lazy" -}} {{-
+$fetchpriority := .Get "fetchpriority" | default "auto" -}}
+
+<figure>
+  {{- with $href }}<a
+    href="{{ . }}"
+    {{
+    with
+    $target
+    }}target="{{ . }}"
+    {{
+    end
+    }}
+    class="inline-block"
+    >{{ end -}} {{- if findRE "^https?" $url.Scheme }}
+    <img
+      class="my-0 rounded-md{{ with $nozoom }} nozoom{{ end }}{{ with $class }} {{ . }}{{ end }}"
+      src="{{ $url.String }}"
+      alt="{{ $altText }}"
+      loading="{{ $loading }}"
+      fetchpriority="{{ $fetchpriority }}"
+    />
+    {{- else }} {{- $resource := "" }} {{- if $.Page.Resources.GetMatch
+    ($url.String) }} {{- $resource = $.Page.Resources.GetMatch ($url.String) }}
+    {{- else if resources.GetMatch ($url.String) }} {{- $resource =
+    resources.Get ($url.String) }} {{- end }} {{- with $resource }} {{- if or
+    $disableImageOptimization (eq .MediaType.SubType "svg")}}
+    <img
+      class="my-0 rounded-md{{ with $nozoom }} nozoom{{ end }}{{ with $class }} {{ . }}{{ end }}"
+      src="{{ .RelPermalink }}"
+      alt="{{ $altText }}"
+      loading="{{ $loading }}"
+      fetchpriority="{{ $fetchpriority }}"
+    />
+    {{- else }} <img class="my-0 rounded-md{{ with $nozoom }} nozoom{{ end }}{{
+    with $class }} {{ . }}{{ end }}" loading="{{ $loading }}" decoding="async"
+    fetchpriority="{{ $fetchpriority }}" alt="{{ $altText }}" {{ with .Width
+    }}width="{{ . }}"{{ end }} {{ with .Height }}height="{{ . }}"{{ end }}
+    src="{{ (.Resize "800x").RelPermalink }}" srcset=" {{- (.Resize
+    "800x").RelPermalink }} 800w, {{- (.Resize "1280x").RelPermalink }} 1280w"
+    sizes="(min-width: 768px) 50vw, 65vw" data-zoom-src="{{ .RelPermalink }}" />
+    {{- end }} {{- else }}
+    <img
+      class="my-0 rounded-md{{ with $nozoom }} nozoom{{ end }}{{ with $class }} {{ . }}{{ end }}"
+      src="{{ $url.String }}"
+      alt="{{ $altText }}"
+      loading="{{ $loading }}"
+      fetchpriority="{{ $fetchpriority }}"
+    />
+    {{- end }} {{- end }} {{ if $href }}</a
+  >{{ end }} {{ with $caption }}
+  <figcaption>{{ . | markdownify }}</figcaption>
+  {{ end }}
+</figure>
+{{- end -}}