Picture + webp

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.

layouts/_default/_markup/render-image.html

@@ -23,6 +23,24 @@
   {{ end }}
   {{ with $resource }}
     <figure>
+      <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" }}
@@ -30,6 +48,7 @@
           {{ else }}
             width="{{ .Width }}"
             height="{{ .Height }}"
+            decoding="async"
             {{ if lt .Width 660 }}
               src="{{ .RelPermalink }}"
             {{ else }}
@@ -46,6 +65,7 @@
             loading="lazy"
           {{ end }}
         />
+      </picture>
       {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
     </figure>
   {{ else }}