move from lazysizes to loading=lazy in-browser

layouts/shortcodes/dualscreens.html

@@ -2,8 +2,7 @@
   <div class="col-md-6">
 	<figure>
 		<a href="{{ index .Params 0 }}/{{ index .Params 1 }}" class="lbox">
-			<noscript class="noscript-lazyload"><img src="{{ index .Params 0 }}/{{ index .Params 1 }}" alt="{{ index .Params 2 }}" title="{{ index .Params 2 }}"></noscript>
-			<img class="lazyload img-responsive" data-src="{{ index .Params 0 }}/{{ index .Params 1 }}" alt="{{ index .Params 2 }}" title="{{ index .Params 2 }}">
+			<img loading="lazy" class="img-responsive" src="{{ index .Params 0 }}/{{ index .Params 1 }}" alt="{{ index .Params 2 }}" title="{{ index .Params 2 }}">
 		</a>
 		<figcaption>{{ index .Params 2 }}</figcaption>
 	</figure>
@@ -11,8 +10,7 @@
   <div class="col-md-6">
 	<figure>
 		<a href="{{ index .Params 0 }}/{{ index .Params 3 }}" class="lbox">
-			<noscript class="noscript-lazyload"><img src="{{ index .Params 0 }}/{{ index .Params 3 }}" alt="{{ index .Params 4 }}" title="{{ index .Params 4 }}"></noscript>
-			<img class="lazyload img-responsive" data-src="{{ index .Params 0 }}/{{ index .Params 3 }}" alt="{{ index .Params 4 }}" title="{{ index .Params 4 }}">
+			<img loading="lazy" class="img-responsive" src="{{ index .Params 0 }}/{{ index .Params 3 }}" alt="{{ index .Params 4 }}" title="{{ index .Params 4 }}">
 		</a>
 		<figcaption>{{ index .Params 4 }}</figcaption>
 	</figure>

themes/jefklak-creative-portfolio/layouts/_default/_markup/render-image.html

@@ -1,7 +1,6 @@
 <figure>
 	<a href="{{ .Destination | safeURL }}" class="lbox">
-		<noscript class="noscript-lazyload"><img src="{{ .Destination | safeURL }}" {{ with .Text }} alt="{{ . }}"{{ end }} {{ with .Title}} title="{{ . }}"{{ end }}></noscript>
-		<img class="lazyload img-responsive" data-src="{{ .Destination | safeURL }}" {{ with .Text }} alt="{{ . }}"{{ end }} {{ with .Title}} title="{{ . }}" alt="{{ . }}"{{ end }}>
+		<img loading="lazy" class="img-responsive" src="{{ .Destination | safeURL }}" {{ with .Text }} alt="{{ . }}"{{ end }} {{ with .Title}} title="{{ . }}" alt="{{ . }}"{{ end }}>
 	</a>
 	{{ with .Title }}
 		<figcaption>{{ . }}</figcaption>

themes/jefklak-creative-portfolio/layouts/partials/footer.html

@@ -1,4 +1,3 @@
 <footer>
   <a style="cursor: pointer;" id="totop" class="no-border"><img src="/img/bg-back.gif" class="no-border" alt="back to top" /></a>
 </footer>  
-<script src="/js/lazysizes.min.js" async></script>

themes/jefklak-creative-portfolio/layouts/partials/head.html

@@ -120,9 +120,6 @@
 
 <noscript>
   <style>
-    img.lazyload {
-      display: none;
-    }
     figure a img {
       max-width: 100%;
     }

themes/jefklak-creative-portfolio/layouts/partials/single-comments.html

@@ -5,10 +5,7 @@
     </h3>
 
     <div class="avatar">
-        <noscript>
-            <img src="/img/avatar.jpg" alt="Me!" />
-        </noscript>                 
-        <img class="lazyload" data-src="/img/avatar.jpg" alt="Me!" />
+        <img loading="lazy" src="/img/avatar.jpg" alt="Me!" />
     </div>
     <div class="support">
         <p>
@@ -16,7 +13,7 @@
             Read more <a href="/about">about me here</a>.
         </p>
         <p>
-            If you found this article amusing and/or helpful, you can <a href="https://ko-fi.com/woutergroeneveld"><strong>buy me a coffee</strong></a> - although I'm more of a tea fan myself. I also like to hear your feedback via e-mail: <a class="meel">say hello</a>. Thanks!
+            If you found this article amusing and/or helpful, you can <a href="https://ko-fi.com/woutergroeneveld"><strong>buy me a coffee</strong></a> - although I'm more of a tea fan myself. I also like to hear your feedback via <a href="https://chat.brainbaking.com/@wouter">Mastodon</a> or e-mail: <a class="meel">say hello</a>. Thanks!
         </p>
         <noscript>
             JavaScript is disabled. I use it to obfuscate my e-mail, keeping spambots at bay. <br/>