diff --git a/static/afbeeldingen/personen/bert-hubert-150x150.jpg b/static/afbeeldingen/personen/bert-hubert-150x150.jpg
new file mode 100644
index 0000000..ec64aa6
Binary files /dev/null and b/static/afbeeldingen/personen/bert-hubert-150x150.jpg differ
diff --git a/static/afbeeldingen/personen/bert-hubert-150x150.webp b/static/afbeeldingen/personen/bert-hubert-150x150.webp
new file mode 100644
index 0000000..907f865
Binary files /dev/null and b/static/afbeeldingen/personen/bert-hubert-150x150.webp differ
diff --git a/static/afbeeldingen/personen/bert-hubert-200x200.webp b/static/afbeeldingen/personen/bert-hubert-200x200.webp
new file mode 100644
index 0000000..53529cc
Binary files /dev/null and b/static/afbeeldingen/personen/bert-hubert-200x200.webp differ
diff --git a/static/afbeeldingen/personen/bjorn-wijers-150x150.png b/static/afbeeldingen/personen/bjorn-wijers-150x150.png
new file mode 100644
index 0000000..1df402f
Binary files /dev/null and b/static/afbeeldingen/personen/bjorn-wijers-150x150.png differ
diff --git a/static/afbeeldingen/personen/bjorn-wijers-150x150.webp b/static/afbeeldingen/personen/bjorn-wijers-150x150.webp
new file mode 100644
index 0000000..c10599f
Binary files /dev/null and b/static/afbeeldingen/personen/bjorn-wijers-150x150.webp differ
diff --git a/static/afbeeldingen/personen/bjorn-wijers-200x200.webp b/static/afbeeldingen/personen/bjorn-wijers-200x200.webp
new file mode 100644
index 0000000..de55eb5
Binary files /dev/null and b/static/afbeeldingen/personen/bjorn-wijers-200x200.webp differ
diff --git a/static/afbeeldingen/personen/brenda-langedijk-150x150.jpg b/static/afbeeldingen/personen/brenda-langedijk-150x150.jpg
new file mode 100644
index 0000000..9397dee
Binary files /dev/null and b/static/afbeeldingen/personen/brenda-langedijk-150x150.jpg differ
diff --git a/static/afbeeldingen/personen/brenda-langedijk-150x150.webp b/static/afbeeldingen/personen/brenda-langedijk-150x150.webp
new file mode 100644
index 0000000..aaf0795
Binary files /dev/null and b/static/afbeeldingen/personen/brenda-langedijk-150x150.webp differ
diff --git a/static/afbeeldingen/personen/brenda-langedijk-200x200.webp b/static/afbeeldingen/personen/brenda-langedijk-200x200.webp
new file mode 100644
index 0000000..144b58a
Binary files /dev/null and b/static/afbeeldingen/personen/brenda-langedijk-200x200.webp differ
diff --git a/static/afbeeldingen/personen/fred-donck-150x150.jpg b/static/afbeeldingen/personen/fred-donck-150x150.jpg
new file mode 100644
index 0000000..29239d6
Binary files /dev/null and b/static/afbeeldingen/personen/fred-donck-150x150.jpg differ
diff --git a/static/afbeeldingen/personen/fred-donck-150x150.webp b/static/afbeeldingen/personen/fred-donck-150x150.webp
new file mode 100644
index 0000000..60dde9a
Binary files /dev/null and b/static/afbeeldingen/personen/fred-donck-150x150.webp differ
diff --git a/static/afbeeldingen/personen/fred-donck-200x200.webp b/static/afbeeldingen/personen/fred-donck-200x200.webp
new file mode 100644
index 0000000..8c348fd
Binary files /dev/null and b/static/afbeeldingen/personen/fred-donck-200x200.webp differ
diff --git a/static/afbeeldingen/personen/hans-van-de-looy-150x150.jpg b/static/afbeeldingen/personen/hans-van-de-looy-150x150.jpg
new file mode 100644
index 0000000..76c2d87
Binary files /dev/null and b/static/afbeeldingen/personen/hans-van-de-looy-150x150.jpg differ
diff --git a/static/afbeeldingen/personen/hans-van-de-looy-150x150.webp b/static/afbeeldingen/personen/hans-van-de-looy-150x150.webp
new file mode 100644
index 0000000..f0be637
Binary files /dev/null and b/static/afbeeldingen/personen/hans-van-de-looy-150x150.webp differ
diff --git a/static/afbeeldingen/personen/hans-van-de-looy-200x200.webp b/static/afbeeldingen/personen/hans-van-de-looy-200x200.webp
new file mode 100644
index 0000000..3514cf4
Binary files /dev/null and b/static/afbeeldingen/personen/hans-van-de-looy-200x200.webp differ
diff --git a/static/afbeeldingen/personen/jan-sepp-150x150.jpg b/static/afbeeldingen/personen/jan-sepp-150x150.jpg
new file mode 100644
index 0000000..419bb5a
Binary files /dev/null and b/static/afbeeldingen/personen/jan-sepp-150x150.jpg differ
diff --git a/static/afbeeldingen/personen/jan-sepp-150x150.webp b/static/afbeeldingen/personen/jan-sepp-150x150.webp
new file mode 100644
index 0000000..965a22f
Binary files /dev/null and b/static/afbeeldingen/personen/jan-sepp-150x150.webp differ
diff --git a/static/afbeeldingen/personen/jan-sepp-200x200.webp b/static/afbeeldingen/personen/jan-sepp-200x200.webp
new file mode 100644
index 0000000..d7b57fc
Binary files /dev/null and b/static/afbeeldingen/personen/jan-sepp-200x200.webp differ
diff --git a/static/afbeeldingen/personen/jeroen-baten-150x150.png b/static/afbeeldingen/personen/jeroen-baten-150x150.png
new file mode 100644
index 0000000..3fa08a8
Binary files /dev/null and b/static/afbeeldingen/personen/jeroen-baten-150x150.png differ
diff --git a/static/afbeeldingen/personen/jeroen-baten-150x150.webp b/static/afbeeldingen/personen/jeroen-baten-150x150.webp
new file mode 100644
index 0000000..cdc1509
Binary files /dev/null and b/static/afbeeldingen/personen/jeroen-baten-150x150.webp differ
diff --git a/static/afbeeldingen/personen/jeroen-baten-200x200.webp b/static/afbeeldingen/personen/jeroen-baten-200x200.webp
new file mode 100644
index 0000000..32b721d
Binary files /dev/null and b/static/afbeeldingen/personen/jeroen-baten-200x200.webp differ
diff --git a/static/afbeeldingen/personen/koen-de-jonge-150x150.jpg b/static/afbeeldingen/personen/koen-de-jonge-150x150.jpg
new file mode 100644
index 0000000..8a14f50
Binary files /dev/null and b/static/afbeeldingen/personen/koen-de-jonge-150x150.jpg differ
diff --git a/static/afbeeldingen/personen/koen-de-jonge-150x150.webp b/static/afbeeldingen/personen/koen-de-jonge-150x150.webp
new file mode 100644
index 0000000..c7d3527
Binary files /dev/null and b/static/afbeeldingen/personen/koen-de-jonge-150x150.webp differ
diff --git a/static/afbeeldingen/personen/koen-de-jonge-200x200.webp b/static/afbeeldingen/personen/koen-de-jonge-200x200.webp
new file mode 100644
index 0000000..b5b634d
Binary files /dev/null and b/static/afbeeldingen/personen/koen-de-jonge-200x200.webp differ
diff --git a/static/afbeeldingen/personen/mark-janssen-150x150.jpg b/static/afbeeldingen/personen/mark-janssen-150x150.jpg
new file mode 100644
index 0000000..d6fc506
Binary files /dev/null and b/static/afbeeldingen/personen/mark-janssen-150x150.jpg differ
diff --git a/static/afbeeldingen/personen/mark-janssen-150x150.webp b/static/afbeeldingen/personen/mark-janssen-150x150.webp
new file mode 100644
index 0000000..9393788
Binary files /dev/null and b/static/afbeeldingen/personen/mark-janssen-150x150.webp differ
diff --git a/static/afbeeldingen/personen/mark-janssen-200x200.webp b/static/afbeeldingen/personen/mark-janssen-200x200.webp
new file mode 100644
index 0000000..463fbaf
Binary files /dev/null and b/static/afbeeldingen/personen/mark-janssen-200x200.webp differ
diff --git a/static/afbeeldingen/personen/michael-boelen-150x150.png b/static/afbeeldingen/personen/michael-boelen-150x150.png
new file mode 100644
index 0000000..7ed09bc
Binary files /dev/null and b/static/afbeeldingen/personen/michael-boelen-150x150.png differ
diff --git a/static/afbeeldingen/personen/michael-boelen-150x150.webp b/static/afbeeldingen/personen/michael-boelen-150x150.webp
new file mode 100644
index 0000000..4bb2c0d
Binary files /dev/null and b/static/afbeeldingen/personen/michael-boelen-150x150.webp differ
diff --git a/static/afbeeldingen/personen/michael-boelen-200x200.webp b/static/afbeeldingen/personen/michael-boelen-200x200.webp
new file mode 100644
index 0000000..9bf52fe
Binary files /dev/null and b/static/afbeeldingen/personen/michael-boelen-200x200.webp differ
diff --git a/static/afbeeldingen/personen/patrick-reijnen-150x150.jpg b/static/afbeeldingen/personen/patrick-reijnen-150x150.jpg
new file mode 100644
index 0000000..167b672
Binary files /dev/null and b/static/afbeeldingen/personen/patrick-reijnen-150x150.jpg differ
diff --git a/static/afbeeldingen/personen/patrick-reijnen-150x150.webp b/static/afbeeldingen/personen/patrick-reijnen-150x150.webp
new file mode 100644
index 0000000..868d7ce
Binary files /dev/null and b/static/afbeeldingen/personen/patrick-reijnen-150x150.webp differ
diff --git a/static/afbeeldingen/personen/patrick-reijnen-200x200.webp b/static/afbeeldingen/personen/patrick-reijnen-200x200.webp
new file mode 100644
index 0000000..20d26f6
Binary files /dev/null and b/static/afbeeldingen/personen/patrick-reijnen-200x200.webp differ
diff --git a/static/afbeeldingen/personen/rogier-spoor-150x150.jpg b/static/afbeeldingen/personen/rogier-spoor-150x150.jpg
new file mode 100644
index 0000000..9cf0c1d
Binary files /dev/null and b/static/afbeeldingen/personen/rogier-spoor-150x150.jpg differ
diff --git a/static/afbeeldingen/personen/rogier-spoor-150x150.webp b/static/afbeeldingen/personen/rogier-spoor-150x150.webp
new file mode 100644
index 0000000..e92994c
Binary files /dev/null and b/static/afbeeldingen/personen/rogier-spoor-150x150.webp differ
diff --git a/static/afbeeldingen/personen/rogier-spoor-200x200.webp b/static/afbeeldingen/personen/rogier-spoor-200x200.webp
new file mode 100644
index 0000000..acc6c0a
Binary files /dev/null and b/static/afbeeldingen/personen/rogier-spoor-200x200.webp differ
diff --git a/static/afbeeldingen/personen/ronny-lam-150x150.jpg b/static/afbeeldingen/personen/ronny-lam-150x150.jpg
new file mode 100644
index 0000000..ba1d476
Binary files /dev/null and b/static/afbeeldingen/personen/ronny-lam-150x150.jpg differ
diff --git a/static/afbeeldingen/personen/ronny-lam-150x150.webp b/static/afbeeldingen/personen/ronny-lam-150x150.webp
new file mode 100644
index 0000000..0be61c6
Binary files /dev/null and b/static/afbeeldingen/personen/ronny-lam-150x150.webp differ
diff --git a/static/afbeeldingen/personen/ronny-lam-200x200.webp b/static/afbeeldingen/personen/ronny-lam-200x200.webp
new file mode 100644
index 0000000..2c003ba
Binary files /dev/null and b/static/afbeeldingen/personen/ronny-lam-200x200.webp differ
diff --git a/static/afbeeldingen/personen/rudi-van-drunen-150x150.jpg b/static/afbeeldingen/personen/rudi-van-drunen-150x150.jpg
new file mode 100644
index 0000000..0aedd6a
Binary files /dev/null and b/static/afbeeldingen/personen/rudi-van-drunen-150x150.jpg differ
diff --git a/static/afbeeldingen/personen/rudi-van-drunen-150x150.webp b/static/afbeeldingen/personen/rudi-van-drunen-150x150.webp
new file mode 100644
index 0000000..b6d2952
Binary files /dev/null and b/static/afbeeldingen/personen/rudi-van-drunen-150x150.webp differ
diff --git a/static/afbeeldingen/personen/rudi-van-drunen-200x200.webp b/static/afbeeldingen/personen/rudi-van-drunen-200x200.webp
new file mode 100644
index 0000000..764f2aa
Binary files /dev/null and b/static/afbeeldingen/personen/rudi-van-drunen-200x200.webp differ
diff --git a/static/afbeeldingen/personen/willem-toorop-150x150.png b/static/afbeeldingen/personen/willem-toorop-150x150.png
new file mode 100644
index 0000000..0169cd5
Binary files /dev/null and b/static/afbeeldingen/personen/willem-toorop-150x150.png differ
diff --git a/static/afbeeldingen/personen/willem-toorop-150x150.webp b/static/afbeeldingen/personen/willem-toorop-150x150.webp
new file mode 100644
index 0000000..a41bff9
Binary files /dev/null and b/static/afbeeldingen/personen/willem-toorop-150x150.webp differ
diff --git a/static/afbeeldingen/personen/willem-toorop-200x200.webp b/static/afbeeldingen/personen/willem-toorop-200x200.webp
new file mode 100644
index 0000000..70ffc96
Binary files /dev/null and b/static/afbeeldingen/personen/willem-toorop-200x200.webp differ
diff --git a/themes/nluug/layouts/_default/_markup/render-image.html b/themes/nluug/layouts/_default/_markup/render-image.html
index 9d08183..f377a91 100644
--- a/themes/nluug/layouts/_default/_markup/render-image.html
+++ b/themes/nluug/layouts/_default/_markup/render-image.html
@@ -1,8 +1,50 @@
-<img
-  src="{{ .Destination | safeURL }}"
-  alt="{{ .Text }}"
-  loading="lazy"
-  decoding="async"
-  class="full-width"
-/>
+<picture>
+  {{ $isJPG := eq (path.Ext .Destination) ".jpg" }}
+  {{ $isPNG := eq (path.Ext .Destination) ".png" }}
 
+  {{ if ($isJPG) -}}
+    {{ $avifPath:= replaceRE "(jpg|jpeg)$i" ".avif" .Destination }}
+    {{ $avifPathStatic:= printf "static/%s" $avifPath }}
+
+    {{ if (fileExists $avifPathStatic) -}}
+      <source srcset="{{ $avifPath | safeURL }}" type="image/avif" >
+    {{- end }}
+
+    {{ $webpPath:= replace .Destination ".jpg" ".webp" }}
+    {{ $webpPathStatic:= printf "static/%s" $webpPath }}
+
+    {{ if (fileExists $webpPathStatic) -}}
+      <source srcset="{{ $webpPath | safeURL }}" type="image/webp" >
+    {{- end }}
+  {{- end }}
+
+  {{ if ($isPNG) -}}
+    {{ $avifPath:= replace .Destination ".png" ".avif" }}
+    {{ $avifPathStatic:= printf "static/%s" $avifPath }}
+
+    {{ if (fileExists $avifPathStatic) -}}
+      <source srcset="{{ $avifPath | safeURL }}" type="image/avif" >
+    {{- end }}
+
+    {{ $webpPath:= replace .Destination ".png" ".webp" }}
+    {{ $webpPathStatic:= printf "static/%s" $webpPath }}
+
+    {{ if (fileExists $webpPathStatic) -}}
+      <source srcset="{{ $webpPath | safeURL }}" type="image/webp" >
+    {{- end }}
+  {{- end }}
+
+  {{- $img := .Page.Resources.GetMatch .Destination -}}
+  {{- if and (not $img) .Page.File -}}
+      {{ $path := path.Join .Page.File.Dir .Destination }}
+      {{- $img = resources.Get $path -}}
+  {{- end -}}
+  <img
+    src="{{ .Destination | safeURL }}"
+    alt="{{ .Text }}"
+    loading="lazy"
+    decoding="async"
+    width="{{ $img.Width }}"
+    height="{{ $img.Height }}"
+  />
+</picture>
diff --git a/themes/nluug/layouts/partials/show-active-members-small.html b/themes/nluug/layouts/partials/show-active-members-small.html
index 29af14d..2bc5707 100644
--- a/themes/nluug/layouts/partials/show-active-members-small.html
+++ b/themes/nluug/layouts/partials/show-active-members-small.html
@@ -1,21 +1,12 @@
-{{ $size_in_pixels := 150 }}
-
 <div class="grid-team-members-small-photos">
   {{ range $key,$val := .Scratch.Get "active_members" }}
     {{ with (index $.Site.Data.personen .) }}
       <div>
-          {{ if .thumbnail }}
-            <figure>
-              {{ if .profile_page }}
-                <a href="{{ .profile_page }}"><img src="{{ .thumbnail }}" alt="Foto van {{ .name }}" height="{{ $size_in_pixels }}" width="{{ $size_in_pixels }}"></a>
-              {{ else }}
-                <img src="{{ .thumbnail }}" alt="Foto van {{ .name }}" height="{{ $size_in_pixels }}" width="{{ $size_in_pixels }}">
-              {{ end }}
-              <figcaption>
-                <small><strong>{{ .name }}</strong></small>
-              </figcaption>
-            </figure>
-          {{ end }}
+        {{ if .thumbnail }}
+          {{ $image := replace .thumbnail "200x200" "150x150" }}
+          {{ $alttext := printf "Foto van %s" .name }}
+          {{ partial "show-image.html" (dict "context" . "image" $image "alt" $alttext "figcaption" .name "link" .profile_page) }}
+        {{ end }}
       </div>
     {{ end }}
   {{ end }}
diff --git a/themes/nluug/layouts/partials/show-image-of-person.html b/themes/nluug/layouts/partials/show-image-of-person.html
index 3aa668e..1a1644d 100644
--- a/themes/nluug/layouts/partials/show-image-of-person.html
+++ b/themes/nluug/layouts/partials/show-image-of-person.html
@@ -1,19 +1,9 @@
-{{ $size_in_pixels := 150 }}
 {{ if .profile_details }}
       <div>
           {{ if .profile_details.thumbnail }}
-            <figure>
-              {{ if .profile_details.profile_page }}
-                <a href="{{ .profile_details.profile_page }}"><img src="{{ .profile_details.thumbnail }}" alt="Foto van {{ .profile_details.name }}" height="{{ $size_in_pixels }}" width="{{ $size_in_pixels }}"></a>
-              {{ else }}
-                <img src="{{ .profile_details.thumbnail }}" alt="Foto van {{ .profile_details.name }}" height="{{ $size_in_pixels }}" width="{{ $size_in_pixels }}">
-              {{ end }}
-              {{ if not .hide_figcaption }}
-              <figcaption>
-                <small><strong>{{ .profile_details.name }}</strong></small>
-              </figcaption>
-              {{ end }}
-            </figure>
+            {{ $image := replace .profile_details.thumbnail "200x200" "150x150" }}
+            {{ $alttext := printf "Foto van %s" .profile_details.name }}
+            {{ partial "show-image.html" (dict "context" . "image" $image "alt" $alttext) }}
           {{ end }}
       </div>
 {{ end }}
diff --git a/themes/nluug/layouts/partials/show-image.html b/themes/nluug/layouts/partials/show-image.html
new file mode 100644
index 0000000..f930fed
--- /dev/null
+++ b/themes/nluug/layouts/partials/show-image.html
@@ -0,0 +1,33 @@
+<figure>
+<picture>
+  {{ $isJPG := eq (path.Ext .image) ".jpg" }}
+  {{ $isPNG := eq (path.Ext .image) ".png" }}
+
+  {{ if ($isJPG) -}}
+    {{ $webpPath:= replace .image ".jpg" ".webp" }}
+    {{ $webpPathStatic:= printf "static/%s" $webpPath }}
+
+    {{ if (fileExists $webpPathStatic) -}}
+      <source srcset="{{ $webpPath | safeURL }}" type="image/webp">
+    {{- end }}
+  {{- end }}
+
+  {{ if ($isPNG) -}}
+    {{ $webpPath:= replace .image ".png" ".webp" }}
+    {{ $webpPathStatic:= printf "static/%s" $webpPath }}
+
+    {{ if (fileExists $webpPathStatic) -}}
+      <source srcset="{{ $webpPath | safeURL }}" type="image/webp">
+    {{- end }}
+  {{- end }}
+  {{ $img := imageConfig (add "/static" (.image | safeURL)) }}
+  {{ if .link }}<a href="{{ .link }}">{{ end }}
+    <img src="{{ .image | safeURL }}" alt="{{ .alt }}" loading="lazy" decoding="async" width="{{ $img.Width }}" height="{{ $img.Height }}">
+  {{ if .link }}</a>{{ end }}
+</picture>
+{{ if .figcaption }}
+<figcaption>
+<small><strong>{{ .figcaption }}</strong></small>
+</figcaption>
+</figure>
+{{ end }}
diff --git a/themes/nluug/layouts/partials/show-related-members.html b/themes/nluug/layouts/partials/show-related-members.html
index 3995548..703afdb 100644
--- a/themes/nluug/layouts/partials/show-related-members.html
+++ b/themes/nluug/layouts/partials/show-related-members.html
@@ -1,21 +1,12 @@
-{{ $size_in_pixels := 150 }}
-
 <div class="grid-team-members-small-photos">
   {{ range $key,$val := .Scratch.Get "related_members" }}
     {{ with (index $.Site.Data.personen .) }}
       <div>
-          {{ if .thumbnail }}
-            <figure>
-              {{ if .profile_page }}
-                <a href="{{ .profile_page }}"><img src="{{ .thumbnail }}" alt="Foto van {{ .name }}" height="{{ $size_in_pixels }}" width="{{ $size_in_pixels }}"></a>
-              {{ else }}
-                <img src="{{ .thumbnail }}" alt="Foto van {{ .name }}" height="{{ $size_in_pixels }}" width="{{ $size_in_pixels }}">
-              {{ end }}
-              <figcaption>
-                <small><strong>{{ .name }}</strong></small>
-              </figcaption>
-            </figure>
-          {{ end }}
+        {{ if .thumbnail }}
+          {{ $image := replace .thumbnail "200x200" "150x150" }}
+          {{ $alttext := printf "Foto van %s" .name }}
+          {{ partial "show-image.html" (dict "context" . "image" $image "alt" $alttext "figcaption" .name "link" .profile_page) }}
+        {{ end }}
       </div>
     {{ end }}
   {{ end }}