From 30d506af0fd1fb90eb7db4bc8b793fa898cc9886 Mon Sep 17 00:00:00 2001
From: stereobooster <stereobooster@gmail.com>
Date: Mon, 11 Sep 2023 08:23:22 +0200
Subject: [PATCH 1/3] Provide width and height for images

---
 layouts/_default/_markup/render-image.html | 2 ++
 layouts/_default/single.html               | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index e2009a06..c1fe3634 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -28,6 +28,8 @@
         {{ if eq .MediaType.SubType "svg" }}
           src="{{ .RelPermalink }}"
         {{ else }}
+          width="{{ .Width }}"
+          height="{{ .Height }}"
           {{ if lt .Width 660 }}
             src="{{ .RelPermalink }}"
           {{ else }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 70e8fe88..340e95a1 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -20,6 +20,8 @@
             {{ if eq .MediaType.SubType "svg" }}
               src="{{ .RelPermalink }}"
             {{ else }}
+              width="{{ .Width }}"
+              height="{{ .Height }}"
               {{ if lt .Width 660 }}
                 src="{{ .RelPermalink }}"
               {{ else }}

From 22e1f1727e9fd42fec51d088b6f90b76618d3383 Mon Sep 17 00:00:00 2001
From: stereobooster <stereobooster@gmail.com>
Date: Mon, 11 Sep 2023 08:40:21 +0200
Subject: [PATCH 2/3] More images

---
 layouts/partials/article-link.html | 2 ++
 layouts/shortcodes/figure.html     | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/layouts/partials/article-link.html b/layouts/partials/article-link.html
index 689bdf71..17236ede 100644
--- a/layouts/partials/article-link.html
+++ b/layouts/partials/article-link.html
@@ -22,6 +22,8 @@
             {{- (.Fill "160x120 smart").RelPermalink }}
             160w, {{- (.Fill "320x240 smart").RelPermalink }} 2x"
             src="{{ (.Fill "160x120 smart").RelPermalink }}"
+            width="160"
+            height="120"
           {{ end }}
           {{ if $.Site.Params.enableImageLazyLoading | default true }}
             loading="lazy"
diff --git a/layouts/shortcodes/figure.html b/layouts/shortcodes/figure.html
index b6d14289..7028c6c1 100644
--- a/layouts/shortcodes/figure.html
+++ b/layouts/shortcodes/figure.html
@@ -27,6 +27,8 @@
           {{ if eq .MediaType.SubType "svg" }}
             src="{{ .RelPermalink }}"
           {{ else }}
+            width="{{ .Width }}"
+            height="{{ .Height }}"
             {{ if lt .Width 660 }}
               src="{{ .RelPermalink }}"
             {{ else }}

From 4108c35fe35318dec5bd9d489e5abc8fafda5e95 Mon Sep 17 00:00:00 2001
From: stereobooster <stereobooster@gmail.com>
Date: Mon, 11 Sep 2023 15:11:55 +0200
Subject: [PATCH 3/3] 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 }}