diff --git a/layouts/_default/li-next.html b/layouts/_default/li-next.html
index 715e98f..eb8082d 100644
--- a/layouts/_default/li-next.html
+++ b/layouts/_default/li-next.html
@@ -3,7 +3,13 @@
     {{ if isset .Params "featuredimage" }}
     <div class="card-img-container">
       <p class="card-img-overlay">Next Article</p>
-      <img src="{{.Params.featuredimage | absURL }}" class="card-img">
+      <picture>
+        {{ if (fileExists (printf "%s/%s" "static" (replace (.Params.featuredimage) (path.Ext .Params.featuredimage) ".webp"))) -}}
+          <source srcset="{{ replace (.Params.featuredimage) (path.Ext (.Params.featuredimage)) ".webp" | absURL }}" type="image/webp">
+        {{- end }}
+        <source srcset="{{ .Params.featuredimage | absURL }}">
+        <img src="{{.Params.featuredimage | absURL }}" class="card-img" {{ if isset .Params "featuredimagedescription" }}alt="{{.Params.featuredimagedescription}}"{{end}}>
+      </picture>
     </div>
     {{ end }}
   <article class="card-body">
diff --git a/layouts/_default/li.html b/layouts/_default/li.html
index 7f1f563..067ed3f 100644
--- a/layouts/_default/li.html
+++ b/layouts/_default/li.html
@@ -2,7 +2,13 @@
   href="{{ .Permalink }}" class="card blog-card" rel="bookmark" >
     {{ if isset .Params "featuredimage" }}
     <div class="card-img-container">
-      <img src="{{.Params.featuredimage | absURL }}" class="card-img" {{ if isset .Params "featuredimagedescription" }}alt="{{.Params.featuredimagedescription}}"{{end}}>
+      <picture>
+        {{ if (fileExists (printf "%s/%s" "static" (replace (.Params.featuredimage) (path.Ext .Params.featuredimage) ".webp"))) -}}
+          <source srcset="{{ replace (.Params.featuredimage) (path.Ext (.Params.featuredimage)) ".webp" | absURL }}" type="image/webp">
+        {{- end }}
+        <source srcset="{{ .Params.featuredimage | absURL }}">
+        <img src="{{.Params.featuredimage | absURL }}" class="card-img" {{ if isset .Params "featuredimagedescription" }}alt="{{.Params.featuredimagedescription}}"{{end}}>
+      </picture>
     </div>
     {{ end }}
   <article class="card-body">