From 1f2702d76902fae60e21048c1b9cd977910cfe3e Mon Sep 17 00:00:00 2001
From: provos <provos@gmail.com>
Date: Mon, 16 Jan 2023 01:36:47 +0000
Subject: [PATCH] support srcset for webp for cover/content images

---
 assets/ts/gallery.ts                          |  2 +-
 layouts/_default/_markup/render-image.html    | 41 +++++++++++++++----
 .../partials/article/components/header.html   |  8 +++-
 3 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/assets/ts/gallery.ts b/assets/ts/gallery.ts
index 9840f1e..b416187 100644
--- a/assets/ts/gallery.ts
+++ b/assets/ts/gallery.ts
@@ -61,7 +61,7 @@ class StackGallery {
         /// because it can not detect whether image is being wrapped by a link or not
         /// and it lead to a invalid HTML construction (<a><figure><img></figure></a>)
 
-        const images = container.querySelectorAll('img.gallery-image');
+        const images = container.querySelectorAll('picture.gallery-image');
         for (const img of Array.from(images)) {
             /// Images are wrapped with figure tag if the paragraph has only images without texts
             /// This is done to allow inline images within paragraphs
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index 0ed5584..b2c3a17 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -8,6 +8,8 @@
 {{/* SVG and external images won't work with gallery layout, because their width and height attributes are unknown */}}
 {{- $galleryImage := false -}}
 
+<picture
+
 {{- if $image -}}
 	{{- $notSVG := ne (path.Ext .Destination) ".svg" -}}
 	{{- $Permalink = $image.RelPermalink -}}
@@ -16,8 +18,33 @@
 		{{- $Width = $image.Width -}}
 		{{- $Height = $image.Height -}}
 		{{- $galleryImage = true -}}
+	{{- end -}}
 
+	{{ if $galleryImage }}
+		class="gallery-image" 
+		data-flex-grow="{{ div (mul $image.Width 100) $image.Height }}"
+		data-flex-basis="{{ div (mul $image.Width 240) $image.Height }}px"
+		{{ with $alt }}
+			alt="{{ . }}"
+		{{ end }}
+	{{ end }}
+{{- end -}}
+
+>
+
+{{- if $image -}}
+	{{- $notSVG := ne (path.Ext .Destination) ".svg" -}}
+	{{- $Permalink = $image.RelPermalink -}}
+	{{- if $notSVG -}}
 		{{- if (default true .Page.Site.Params.imageProcessing.content.enabled) -}}
+			{{- $small := $image.Resize `webp 480x` -}}
+			{{- $big := $image.Resize `webp 1024x` -}}
+			{{- $Srcset = printf `%s 480w, %s 1024w` $small.RelPermalink $big.RelPermalink -}}
+
+			<source type="image/webp"
+				srcset="{{ $Srcset }}"
+			>
+
 			{{- $small := $image.Resize `480x` -}}
 			{{- $big := $image.Resize `1024x` -}}
 			{{- $Srcset = printf `%s 480w, %s 1024w` $small.RelPermalink $big.RelPermalink -}}
@@ -25,17 +52,13 @@
 	{{- end -}}
 {{- end -}}
 
+
 <img src="{{ $Permalink }}"
 	{{ with $Width }}width="{{ . }}"{{ end }}
 	{{ with $Height }}height="{{ . }}"{{ end }}
 	{{ with $Srcset }}srcset="{{ . }}"{{ end }}
 	loading="lazy"
-	{{ with $alt }}
-		alt="{{ . }}"
-	{{ end }}
-	{{ if $galleryImage }}
-		class="gallery-image" 
-		data-flex-grow="{{ div (mul $image.Width 100) $image.Height }}"
-		data-flex-basis="{{ div (mul $image.Width 240) $image.Height }}px"
-	{{ end }}
->
\ No newline at end of file
+	decoding="async"
+>
+
+</picture>
\ No newline at end of file
diff --git a/layouts/partials/article/components/header.html b/layouts/partials/article/components/header.html
index 7582ec2..9396a81 100644
--- a/layouts/partials/article/components/header.html
+++ b/layouts/partials/article/components/header.html
@@ -9,7 +9,12 @@
                     {{- $Height := $image.resource.Height -}}
                     {{- $Srcset := "" -}}
                     
+                    <picture>
                     {{- if (default true .Page.Site.Params.imageProcessing.cover.enabled) -}}
+                        {{- $thumbnail := $image.resource.Resize "webp 800x" -}}
+                        {{- $thumbnailRetina := $image.resource.Resize "webp 1600x" -}}
+                        {{- $Srcset = printf "%s 800w, %s 1600w" $thumbnail.RelPermalink $thumbnailRetina.RelPermalink -}}
+                        <source type="image/webp" srcset="{{ $Srcset }}" />
                         {{- $thumbnail := $image.resource.Resize "800x" -}}
                         {{- $thumbnailRetina := $image.resource.Resize "1600x" -}}
                         {{- $Srcset = printf "%s 800w, %s 1600w" $thumbnail.RelPermalink $thumbnailRetina.RelPermalink -}}
@@ -22,8 +27,9 @@
                         {{ with $Srcset }}srcset="{{ . }}"{{ end }}
                         width="{{ $Width }}" 
                         height="{{ $Height }}" 
-                        loading="lazy"
+                        decoding="async"
                         alt="Featured image of post {{ .Title }}" />
+                    </picture>
                 {{ else }}
                     <img src="{{ $image.permalink }}" loading="lazy" alt="Featured image of post {{ .Title }}" />
                 {{ end }}