From 8bfa9926c7e5d9cbc374c7eadd8374c0df7ead62 Mon Sep 17 00:00:00 2001
From: ZhenShuo Leo <98386542+ZhenShuo2021@users.noreply.github.com>
Date: Sat, 11 Oct 2025 14:54:55 +0800
Subject: [PATCH] fix(render-image): improper srcset usage

- correct srcset image w descriptor value
- use compressed image for src fallback
---
 layouts/_default/_markup/render-image.html | 56 +++++++++++++++++-----
 layouts/shortcodes/figure.html             | 18 ++++---
 2 files changed, 55 insertions(+), 19 deletions(-)

diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index 60a92d6d..49204097 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -2,21 +2,53 @@
   <img class="my-0 rounded-md" loading="lazy" alt="{{ .alt }}" src="{{ .src }}">
 {{- end }}
 
-{{ define "RenderImageResponsive" -}}
+{{- define "RenderImageResponsive" -}}
+  {{/* Responsive Image
+    The current setting sizes="(min-width: 768px) 50vw, 65vw" makes the iPhone 16 and 16 Pro
+    select a smaller image, while the iPhone 16 Pro Max selects a larger image.
+
+    Steps:
+    1. Check the media queries in the `sizes` property.
+    2. Find the first matching value. For example, on a mobile device with a CSS pixel width
+    of 390px and DPR = 3 (iPhone 13), given setting sizes="(min-width: 768px) 50vw, 100vw",
+    it matches the `100vw` option.
+    3. Calculate the optimal image size: 390 × 3 × 100% (100vw) = 1170.
+    4. Find the corresponding match in the `srcset`.
+
+    To make the browser select a smaller image on mobile devices
+    override the template and change the `sizes` property to "(min-width: 768px) 50vw, 30vw"
+
+    The sizes="auto" is valid only when loading="lazy".
+  */}}
+  {{- $imgObj := .imgObj -}}
+  {{- $alt := .alt -}}
+  {{- $originalWidth := $imgObj.Width -}}
+
+  {{- $img800 := $imgObj -}}
+  {{- $img1280 := $imgObj -}}
+  {{- if gt $originalWidth 800 -}}
+    {{- $img800 = $imgObj.Resize "800x" -}}
+  {{- end -}}
+  {{- if gt $originalWidth 1280 -}}
+    {{- $img1280 = $imgObj.Resize "1280x" -}}
+  {{- end -}}
+
+  {{- $srcset := printf "%s 800w, %s 1280w" $img800.RelPermalink $img1280.RelPermalink -}}
+
+
   <img
     class="my-0 rounded-md"
     loading="lazy"
     decoding="async"
-    fetchpriority="low"
-    alt="{{ .alt }}"
-    srcset="
-      {{ (.resource.Resize "330x").RelPermalink }}  330w,
-      {{ (.resource.Resize "660x").RelPermalink }}  660w,
-      {{ (.resource.Resize "1280x").RelPermalink }} 1280w
-    "
-    data-zoom-src="{{ .resource.RelPermalink }}"
-    src="{{ .resource.RelPermalink }}">
-{{- end }}
+    fetchpriority="auto"
+    alt="{{ $alt }}"
+    {{ with $imgObj.Width }}width="{{ . }}"{{ end }}
+    {{ with $imgObj.Height }}height="{{ . }}"{{ end }}
+    src="{{ $img800.RelPermalink }}"
+    srcset="{{ $srcset }}"
+    sizes="(min-width: 768px) 50vw, 65vw"
+    data-zoom-src="{{ $imgObj.RelPermalink }}">
+{{- end -}}
 
 {{ define "RenderImageCaption" -}}
   {{- with .caption }}
@@ -44,7 +76,7 @@
     {{- $isSVG := eq $resource.MediaType.SubType "svg" }}
     {{- $shouldOptimize := and (not $disableImageOptimizationMD) (not $isSVG) }}
     {{- if $shouldOptimize }}
-      {{ template "RenderImageResponsive" (dict "resource" $resource "alt" $altText) }}
+      {{- template "RenderImageResponsive" (dict "imgObj" $resource "alt" $altText) -}}
     {{- else }}
       {{ template "RenderImageSimple" (dict "src" $resource.RelPermalink "alt" $altText) }}
     {{- end }}
diff --git a/layouts/shortcodes/figure.html b/layouts/shortcodes/figure.html
index 35f5e331..f1e9454d 100644
--- a/layouts/shortcodes/figure.html
+++ b/layouts/shortcodes/figure.html
@@ -31,14 +31,18 @@
       {{- else }}
         <img
           class="my-0 rounded-md{{ with $nozoom }} nozoom{{ end }}{{ with $class }} {{ . }}{{ end }}"
-          srcset="
-          {{ (.Resize "330x").RelPermalink }} 330w,
-          {{ (.Resize "660x").RelPermalink }} 660w,
-          {{ (.Resize "1024x").RelPermalink }} 1024w,
-          {{ (.Resize "1320x").RelPermalink }} 2x"
-          src="{{ (.Resize "660x").RelPermalink }}"
-          data-zoom-src="{{ (.Resize "1320x").RelPermalink }}"
+          loading="lazy"
+          decoding="async"
+          fetchpriority="auto"
           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 }}