From 759982fd4ac39c16319fc976d2df10fe1e0d6ab5 Mon Sep 17 00:00:00 2001
From: stereobooster <stereobooster@gmail.com>
Date: Mon, 11 Sep 2023 15:11:55 +0200
Subject: [PATCH 1/2] Picture + webp

---
 exampleSite/content/samples/markdown/index.md |  4 ++
 layouts/_default/_markup/render-image.html    | 60 ++++++++++++-------
 2 files changed, 44 insertions(+), 20 deletions(-)

diff --git a/exampleSite/content/samples/markdown/index.md b/exampleSite/content/samples/markdown/index.md
index 601fae2a..d9f91110 100755
--- a/exampleSite/content/samples/markdown/index.md
+++ b/exampleSite/content/samples/markdown/index.md
@@ -9,6 +9,10 @@ This article offers a sample of basic Markdown formatting that can be used in Co
 
 <!--more-->
 
+## Image
+
+![sample image](thumb-surendran-mp-IhWYiwSxm8g-unsplash.jpg)
+
 ## Headings
 
 The following HTML `<h1>`—`<h6>` elements represent six levels of section headings. `<h1>` is the highest section level while `<h6>` is the lowest.
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index c1fe3634..699b3f25 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -23,29 +23,49 @@
   {{ end }}
   {{ with $resource }}
     <figure>
-      <img
-        class="mx-auto my-0 rounded-md"
-        {{ if eq .MediaType.SubType "svg" }}
-          src="{{ .RelPermalink }}"
-        {{ else }}
-          width="{{ .Width }}"
-          height="{{ .Height }}"
-          {{ if lt .Width 660 }}
+      <picture>
+        {{ if ne .MediaType.SubType "svg" }}
+          <source 
+            {{ if lt .Width 660 }}
+              {{ with .Resize (printf "%dx%d webp" .Width .Height) }}
+                src="{{ .RelPermalink }}"
+              {{ end }}
+            {{ else }}
+              srcset="
+                {{- (.Resize "330x webp").RelPermalink }} 330w,
+                {{- (.Resize "660x webp").RelPermalink }} 660w,
+                {{- (.Resize "1024x webp").RelPermalink }} 1024w,
+                {{- (.Resize "1320x webp").RelPermalink }} 2x"
+              src="{{ (.Resize "660x webp").RelPermalink }}" 
+            {{ end }}
+            type="image/webp" 
+          />
+        {{ end }}
+        <img
+          class="mx-auto my-0 rounded-md"
+          {{ if eq .MediaType.SubType "svg" }}
             src="{{ .RelPermalink }}"
           {{ else }}
-            srcset="
-            {{- (.Resize "330x").RelPermalink }} 330w,
-            {{- (.Resize "660x").RelPermalink }} 660w,
-            {{- (.Resize "1024x").RelPermalink }} 1024w,
-            {{- (.Resize "1320x").RelPermalink }} 2x"
-            src="{{ (.Resize "660x").RelPermalink }}"
+            width="{{ .Width }}"
+            height="{{ .Height }}"
+            decoding="async"
+            {{ if lt .Width 660 }}
+              src="{{ .RelPermalink }}"
+            {{ else }}
+              srcset="
+              {{- (.Resize "330x").RelPermalink }} 330w,
+              {{- (.Resize "660x").RelPermalink }} 660w,
+              {{- (.Resize "1024x").RelPermalink }} 1024w,
+              {{- (.Resize "1320x").RelPermalink }} 2x"
+              src="{{ (.Resize "660x").RelPermalink }}"
+            {{ end }}
           {{ end }}
-        {{ end }}
-        alt="{{ $altText }}"
-        {{ if $lazyLoad }}
-          loading="lazy"
-        {{ end }}
-      />
+          alt="{{ $altText }}"
+          {{ if $lazyLoad }}
+            loading="lazy"
+          {{ end }}
+        />
+      </picture>
       {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
     </figure>
   {{ else }}

From 86dd65776f24c5c5a1296ce91dd1975b77a73275 Mon Sep 17 00:00:00 2001
From: stereobooster <stereobooster@gmail.com>
Date: Tue, 12 Sep 2023 21:19:27 +0200
Subject: [PATCH 2/2] Add configuration flag

---
 exampleSite/config/_default/params.toml    | 1 +
 layouts/_default/_markup/render-image.html | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml
index d828f120..10baff41 100644
--- a/exampleSite/config/_default/params.toml
+++ b/exampleSite/config/_default/params.toml
@@ -12,6 +12,7 @@ autoSwitchAppearance = true
 enableSearch = true
 enableCodeCopy = true
 enableImageLazyLoading = true
+enableWebp = true
 
 # robots = ""
 fingerprintAlgorithm = "sha256"
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index 699b3f25..cbd84eba 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -2,6 +2,7 @@
 {{ $altText := .Text }}
 {{ $caption := .Title }}
 {{ $lazyLoad := $.Page.Site.Params.enableImageLazyLoading | default true }}
+{{ $webp := $.Page.Site.Params.enableWebp | default true }}
 {{ if findRE "^https?" $url.Scheme }}
   <figure>
     <img
@@ -24,7 +25,7 @@
   {{ with $resource }}
     <figure>
       <picture>
-        {{ if ne .MediaType.SubType "svg" }}
+        {{ if (and (ne .MediaType.SubType "svg") $webp) }}
           <source 
             {{ if lt .Width 660 }}
               {{ with .Resize (printf "%dx%d webp" .Width .Height) }}