Use "class=lozad" also for almost all images including webp

layouts/_default/article.html

@@ -10,4 +10,4 @@
       <a class="btn btn-transparent" href="{{ .Permalink }}">{{ i18n "readMore" }}</a>
     </div>
   </div>
-</article>
+</article>

layouts/_default/single.html

@@ -11,7 +11,7 @@
           <li class="list-inline-item"><a href="{{ `author/` | relLangURL }}{{ .Params.Author | urlize }}/">{{ .Params.Author }}</a></li>
           <li class="list-inline-item">{{ dateFormat "Monday, Jan 2, 2006" .Date }}</li>
         </ul>
-        <img class="img-fluid mb-50" src="{{ .Params.Image | absURL }}" alt="blog-image">
+        <img class="img-fluid mb-50 lozad" data-src="{{ .Params.Image | absURL }}" alt="blog-image">
       </div>
       <div class="col-lg-8 offset-lg-2">
         <div class="post-single-content">

layouts/author/single.html

@@ -14,10 +14,10 @@
 				<div class="content text-center">
 					<figure>
 						{{ if .Params.Image }}
-						<img class="rounded-circle img-fluid" src="{{.Params.Image | relURL }}">
+						<img class="rounded-circle img-fluid lozad" data-src="{{.Params.Image | relURL }}">
 						{{else if .Params.Email}}
-						<img class="rounded-circle img-fluid"
-							src="https://www.gravatar.com/avatar/{{ md5 .Params.email }}?s=128&pg&d=identicon">
+						<img class="rounded-circle img-fluid lozad"
+							data-src="https://www.gravatar.com/avatar/{{ md5 .Params.email }}?s=128&pg&d=identicon">
 						{{ end }}
 						<figcaption>
 							<h5 class="font-weight-bold">
@@ -56,4 +56,4 @@
 		</div>
 	</div>
 </section>
-{{ end }}
+{{ end }}

layouts/partials/banner.html

@@ -5,7 +5,7 @@
 {{"<!-- Welcome Slider-->" | safeHTML}}
 <section class="hero-area" style='background-image: url("{{ .bg_image_webp | absURL }}")'>
 	<!-- this image is for trigger this section fallback background image -->
-	<img style="display: none;" onerror="this.onerror=null;this.parentElement.style.backgroundImage= 'url({{ .bg_image | absURL }})'" src="{{ .bg_image_webp | absURL }}" />
+	<img class="lozad" style="display: none;" onerror="this.onerror=null;this.parentElement.style.backgroundImage= 'url({{ .bg_image | absURL }})'" data-src="{{ .bg_image_webp | absURL }}" />
 
 	<div class="block">
 		{{ if .icon }}
@@ -24,4 +24,4 @@
 </section>
 {{"<!-- /Welcome Slider-->" | safeHTML}}
 {{end}}
-{{end}}
+{{end}}

layouts/partials/cta.html

@@ -5,7 +5,7 @@
 {{"<!-- Start Call To Action -->" | safeHTML}}
 <section id="cta" class="call-to-action section-sm bg-1 overly" style='background-image: url("{{ .bg_image_webp | absURL }}")'>
 	<!-- this image is for trigger this section fallback background image -->
-	<img style="display: none;" onerror="this.onerror=null;this.parentElement.style.backgroundImage= 'url({{ .bg_image | absURL }})'" src="{{ .bg_image_webp | absURL }}" />
+	<img class="lozad" style="display: none;" onerror="this.onerror=null;this.parentElement.style.backgroundImage= 'url({{ .bg_image | absURL }})'" data-src="{{ .bg_image_webp | absURL }}" />
 	<div class="container">
 		<div class="row">
 			<div class="col-lg-12 text-center">

layouts/partials/feature.html

@@ -7,8 +7,8 @@
 	<div class="container-fluid">
 		<div class="row">
 			<div class="col-lg-6 padding-0" style="background-image: url('{{ .image_webp | absURL }}'); background-size: cover; background-position: top center; background-repeat: no-repeat; min-height: 400px;">
-			<!-- this image is for trigger this section fallback background image -->
-			<img style="display: none;" onerror="this.onerror=null;this.parentElement.style.backgroundImage= 'url({{ .image | absURL }})'" src="{{ .image_webp | absURL }}" />
+				<!-- this image is for trigger this section fallback background image -->
+				<img style="display: none;" onerror="this.onerror=null;this.parentElement.style.backgroundImage= 'url({{ .image | absURL }})'" data-src="{{ .image_webp | absURL }}" />
 			</div>
 			<div class="col-lg-6">
 				<div class="content-block">
@@ -38,4 +38,4 @@
 </section>
 {{"<!-- /feature -->" | safeHTML}}
 {{ end }}
-{{ end }}
+{{ end }}

layouts/partials/funfacts.html

@@ -5,7 +5,7 @@
 {{"<!-- Start Counter Section -->" | safeHTML}}
 <section id="counter" class="parallax-section bg-1 section overly" style='background-image: url("{{ .bg_image_webp | absURL }}")'>
 	<!-- this image is for trigger this section fallback background image -->
-	<img style="display: none;" onerror="this.onerror=null;this.parentElement.style.backgroundImage= 'url({{ .bg_image | absURL }})'" src="{{ .bg_image_webp | absURL }}" />
+	<img class="lozad" style="display: none;" onerror="this.onerror=null;this.parentElement.style.backgroundImage= 'url({{ .bg_image | absURL }})'" data-src="{{ .bg_image_webp | absURL }}" />
 	<div class="container">
 		<div class="row justify-content-center">
 			{{ range .counter_item }}
@@ -22,4 +22,4 @@
 </section>
 {{"<!-- /Counter Section -->" | safeHTML}}
 {{ end }}
-{{ end }}
+{{ end }}

layouts/partials/navigation.html

@@ -3,7 +3,7 @@
 		<nav class="navbar navbar-expand-lg navbar-dark">
 			<a class="navbar-brand p-0" href="{{ .Site.BaseURL | relLangURL }}">
 				{{ if .Site.Params.logo }}
-				<img class="img-fluid" src="{{ .Site.Params.logo | absURL }}" alt="{{ .Site.Title }}">
+				<img class="lozad" class="img-fluid" data-src="{{ .Site.Params.logo | absURL }}" alt="{{ .Site.Title }}">
 				{{ else }}
 				{{ .Site.Title }}
 				{{ end }}
@@ -28,13 +28,13 @@
 					</li>
 					{{ end }}
 					{{ end }}
-					
+
 
 					{{ range .Site.Menus.static }}
 					<li class="nav-item"><a class="nav-link" target="_blank" href="{{ .URL }}">{{ i18n .Name }}</a>
 					</li>
 					{{ end }}
-					
+
 				</ul>
 				<!-- Language List -->
 				{{- if .Site.IsMultiLingual }}

layouts/partials/portfolio.html

@@ -44,7 +44,7 @@
 			<div class="col-lg-4 shuffle-item"
 				data-groups="[{{range $index, $element:= .categories }}{{if ne $index 0}},{{end}}&quot;{{. | urlize}}&quot;{{ end }}]">
 				<div class="portfolio-block mb-4">
-					<img class="img-fluid" src="{{ .image_webp | absURL }}" onerror="this.onerror=null;this.src='{{ .image | absURL }}'" alt="{{ .name }}">
+					<img class="img-fluid lozad" data-src="{{ .image_webp | absURL }}" onerror="this.onerror=null;this.src='{{ .image | absURL }}'" alt="{{ .name }}">
 					<div class="caption">
 						<a class="search-icon image-popup" data-effect="mfp-with-zoom" href="{{ .image | relURL }}"
 							data-lightbox="image-1">
@@ -67,4 +67,4 @@
 </section>
 {{"<!-- /Portfolio -->" | safeHTML}}
 {{ end }}
-{{ end }}
+{{ end }}

layouts/partials/skill.html

@@ -21,7 +21,7 @@
 				<h2>{{ .subtitle | markdownify }}</h2>
 				<p> {{ .content | markdownify }}</p>
 				{{ with .image }}
-				<img class="img-fluid" src="{{ . | absURL }}" alt="image">
+				<img class="img-fluid lozad" data-src="{{ . | absURL }}" alt="image">
 				{{ end }}
 			</div>
 			<div class="col-lg-6">
@@ -45,4 +45,4 @@
 </section>
 {{"<!-- /skill -->" | safeHTML }}
 {{ end }}
-{{ end }}
+{{ end }}

layouts/partials/testimonial.html

@@ -6,7 +6,7 @@
 <section id="testimonial" class="testimonial overly section bg-2"
 	style='background-image: url("{{ .bg_image_webp | absURL }}")'>
 	<!-- this image is for trigger this section fallback background image -->
-	<img style="display: none;" onerror="this.onerror=null;this.parentElement.style.backgroundImage= 'url({{ .bg_image | absURL }})'" src="{{ .bg_image_webp | absURL }}" />
+	<img class="lozad" style="display: none;" onerror="this.onerror=null;this.parentElement.style.backgroundImage= 'url({{ .bg_image | absURL }})'" data-src="{{ .bg_image_webp | absURL }}" />
 	<div class="container">
 		<div class="row">
 			<div class="col-xl-12">
@@ -41,4 +41,4 @@
 </section>
 {{"<!-- /testimonial -->" | safeHTML}}
 {{ end }}
-{{ end }}
+{{ end }}