diff --git a/hugo.toml b/hugo.toml
index a4d3656..6874119 100644
--- a/hugo.toml
+++ b/hugo.toml
@@ -43,11 +43,7 @@ defaultContentLanguageInSubdir = false
   mathjax = false # Enable MathJax
   customCSS = ["css/its.css"] # Include custom CSS files
   customJS = ["js/its.js"] # Include custom JS files
-  landscapePhotoWidths = [2080, 1920, 1700, 1600, 1280, 1024, 768, 550, 480, 430, 360, 320]
-  portraitPhotoWidths = [1500, 1000, 750, 600]
-
-[imaging]
-  quality = 75
+  imageSizes = [ 320, 640, 960, 1280, 1600, 1920 ]
 
 [Params.style.vars]
   highlightColor = "#109c11" # matrix green
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index fef5b65..7d34057 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -1,52 +1,64 @@
-<!-- Fallback -->
-{{ $originalImage := resources.Get "images/glider.png" }}
-{{ $myTitle := i18n "image not found" }}
-{{ with .Destination }}
-    {{ $myTitle := $.Title }}
-    <!-- Page-Resources -->
-    {{ with $.Page.Resources.Get . }}
-        {{ $originalImage = . }}
-    {{ else }}
-        <!-- Static-Resources -->
-        {{ with resources.Get . }}
-            {{ $originalImage = . }}
-        {{ end }}
-    {{ end }}
-{{ end }}
+{{- $image_file := .Destination -}}
+{{- $image := $.Page.Resources.Get $image_file -}}
+<!-- Page-Resources -->
+{{- with $image -}}
+	{{- $image = . -}}
+{{- else -}}
+	<!-- Static-Resources -->
+	{{- with resources.Get $image_file -}}
+		{{- $image = . -}}
+	{{- end -}}
+{{- end -}}
 
-<p class="md-image">
-    <picture>
-<!-- Set size from original size -->
-{{ $width := $originalImage.Width }}
+{{- $background_colour := "#020221" -}}
+{{- $alt := .Text -}}
+{{- $label := .Text -}}
+{{- $caption := "" -}}
+{{- if ne .Title "" -}}
+	{{- $caption = .Title | $.Page.RenderString -}}
+	{{- $label = $caption -}}
+{{- end -}}
+{{- $imageSizes := site.Params.imageSizes -}}
 
-{{ if gt $width 800 }}
-    {{ with $originalImage.Resize "800x" }}
-        <source media="(min-width:800px)" srcset="{{ .RelPermalink | safeURL }}" />
-    {{ end}}
-{{ end }}
+{{- with $image -}}
+	{{- $image_width := $image.Width -}}
+	{{- $image_height := $image.Height -}}
+	{{- $fallback_image := ($image.Resize (print "640x jpg " $background_colour)) -}}
 
-{{ if gt $width 1200 }}
-    {{ with $originalImage.Resize "1200x" }}
-        <source media="(min-width:1200px)" srcset="{{ .RelPermalink | safeURL }}" />
-    {{ end}}
+<figure role="figure" aria-label="{{- $label | plainify -}}">
+	<a href="{{- $image.RelPermalink -}}">
+		<div class="image-wrapper">
+			<img
+				alt="{{- $alt -}}"
+				title="{{- $label | plainify -}}"
+				width="{{- $image_width -}}"
+				height="{{- $image_height -}}"
+				{{- if (or (strings.HasSuffix $image ".gif") (strings.HasSuffix $image ".svg")) -}}
+					src="{{- $image.RelPermalink -}}"
+				{{ else }}
+					srcset="
+					{{- if le $image.Width (index $imageSizes 0) }}
+						{{- with $image.Resize (print $image.Width "x webp " $background_colour) -}}
+						{{- print .RelPermalink " " .Width "w, " -}}
+						{{- end -}}
+					{{- end -}}
+					{{- with $imageSizes -}}
+						{{- range $index, $size := . -}}
+							{{- if ge $image.Width $size -}}
+								{{- with $image.Resize (print $size "x webp " $background_colour) -}}
+									{{- print .RelPermalink " " $size "w, " -}}
+								{{- end -}}
+							{{- end -}}
+						{{- end -}}
+					{{- end -}}"
+					sizes="(min-width: 1024px) 100vw, 50vw"
+					src="{{- $fallback_image.RelPermalink -}}"
+					decoding="async"
+				{{- end }}
+				loading="lazy"
+			/>
+		</div>
+	</a>
+	<figcaption>{{- $caption -}}</figcaption>
+</figure>
 {{ end }}
-
-{{ if gt $width 1500 }}
-    {{ with $originalImage.Resize "1500x" }}
-        <source media="(min-width:1500px)" srcset="{{ .RelPermalink | safeURL }}" />
-    {{ end}}
-{{ end }}
-
-{{ if gt $width 2200 }}
-    {{ with $originalImage.Resize "2200x" }}
-        <source media="(min-width:2200px)" srcset="{{ .RelPermalink | safeURL }}" />
-    {{ end}}
-{{ end }}
-
-{{ $tinyImage := $originalImage }}
-{{ if gt $width 500 }}
-    {{ $tinyImage = $originalImage.Resize "500x" }}
-{{ end }}
-        <img src="{{ $tinyImage.RelPermalink | safeURL }}" alt="{{ $myTitle }}" title="{{ $myTitle }}" />
-    </picture>
-</p>