diff --git a/layouts/partials/image.html b/layouts/partials/image.html
new file mode 100644
index 00000000..d6a747f5
--- /dev/null
+++ b/layouts/partials/image.html
@@ -0,0 +1,95 @@
+<!-- prettier-ignore -->
+{{ if .caption }}
+  <figure>
+{{ end }}
+
+{{ if (strings.HasPrefix .src "http") }}
+  <!-- External image -->
+  <img
+    src="{{ .src }}"
+    alt="{{ .alt }}"
+    {{ with .caption }}title="{{ . | markdownify | plainify }}"{{ end }}
+    {{ if .lazy }}loading="lazy"{{ end }}
+  />
+{{ else if (strings.HasPrefix .src "/") }}
+  <!-- Image from static/ -->
+  {{ $imageConfig := imageConfig (path.Join "static" .src) }}
+  <img
+    src="{{ .src }}"
+    alt="{{ .alt }}"
+    {{ with .caption }}title="{{ . | markdownify | plainify }}"{{ end }}
+    {{ if .lazy }}loading="lazy"{{ end }}
+    width="{{ $imageConfig.Width }}"
+    height="{{ $imageConfig.Height }}"
+  />
+{{ else }}
+  {{ $src := .src }}
+  {{ if strings.HasPrefix $src "./" }}
+    <!-- Strip "./" prefix from relative path -->
+    {{ $src = substr $src 2 }}
+  {{ end }}
+  <!-- Image from page bundle -->
+  {{ $images := .page.Resources.ByType "image" }}
+  {{ $image := $images.GetMatch $src }}
+  {{ if eq $image.MediaType.SubType "svg" }}
+    <!-- No processing for SVGs -->
+    <img src="{{ $image.RelPermalink }}" alt="{{ .alt }}" />
+  {{ else }}
+    <!-- Calculate resize widths in increments of 100px -->
+    {{ $minWidth := .page.Site.Params.imageResize.min | default 300 }}
+    {{ $maxWidth := .page.Site.Params.imageResize.max | default 700 }}
+    {{ $increment := .page.Site.Params.imageResize.increment | default 200 }}
+    {{ $widths := seq $minWidth $increment $maxWidth }}
+    {{ if lt $image.Width $maxWidth }}
+      {{ $widths = $widths | append $image.Width }}
+    {{ end }}
+    {{ $widthsCount := len $widths }}
+
+    {{ $sizes := slice }}
+    {{ $srcSet := slice }}
+    {{ $webpSrcSet := slice }}
+    {{ range $i, $width := $widths }}
+      {{ if ge $image.Width $width }}
+        {{ if eq $i (sub $widthsCount 1) }}
+          {{ $sizes = $sizes | append (printf "%dpx" $width) }}
+        {{ else }}
+          {{ $maxWidth := (add $width (sub $increment 1)) }}
+          {{ $sizes = $sizes | append (printf "(max-width: %dpx) %dpx" $maxWidth $width) }}
+        {{ end }}
+        {{ $resized := $image.Resize (printf "%dx" $width) }}
+        {{ $srcSet = $srcSet | append (printf "%s %dw" $resized.RelPermalink $resized.Width) }}
+        {{ if not (eq "webp" $image.MediaType.SubType) }}
+          <!-- If image format is not WebP, add conversions -->
+          {{ $webp := $image.Resize (printf "%dx webp" $width) }}
+          {{ $webpSrcSet = $webpSrcSet | append (printf "%s %dw" $webp.RelPermalink $webp.Width) }}
+        {{ end }}
+      {{ end }}
+    {{ end }}
+
+
+    <picture>
+      <source
+        type="image/webp"
+        {{ with $webpSrcSet }}srcset="{{ delimit . "," }}"{{ end }}
+        {{ with $sizes }}sizes="{{ delimit . "," }}"{{ end }}
+      />
+      <img
+        src="{{ $image.RelPermalink }}"
+        {{ with $srcSet }}srcset="{{ delimit . "," }}"{{ end }}
+        {{ with $sizes }}sizes="{{ delimit . "," }}"{{ end }}
+        alt="{{ .alt }}"
+        {{ with .caption }}title="{{ . | markdownify | plainify }}"{{ end }}
+        {{ if .lazy }}loading="lazy"{{ end }}
+        width="{{ $image.Width }}"
+        height="{{ $image.Height }}"
+      />
+    </picture>
+  {{ end }}
+{{ end }}
+
+
+<!-- prettier-ignore -->
+{{ if .caption }}
+    <figcaption>{{ .page.RenderString .caption }}</figcaption>
+  </figure>
+{{ end }}
\ No newline at end of file