diff --git a/layouts/blog/single.html b/layouts/blog/single.html
index 87cdd29..4aa63cc 100644
--- a/layouts/blog/single.html
+++ b/layouts/blog/single.html
@@ -39,7 +39,7 @@
   {{ range . -}}
   <div class="col">
     <div class="card">
-      {{- .Scratch.Set "fillImage" "1270x620 Center" -}}
+      {{- .Scratch.Set "fillImageCard" "1270x620 Center" -}}
       {{ partial "content/card-image.html" . }}
       <div class="card-body">
         <article>
diff --git a/layouts/partials/content/card-image.html b/layouts/partials/content/card-image.html
index c20f2da..7a3a43e 100644
--- a/layouts/partials/content/card-image.html
+++ b/layouts/partials/content/card-image.html
@@ -1,4 +1,4 @@
-{{ $fillImage := .Scratch.Get "fillImage" }}
+{{ $fillImage := .Scratch.Get "fillImageCard" }}
 {{ if not $fillImage -}}
   {{ $fillImage = site.Params.fillImage }}
 {{ end -}}
@@ -8,7 +8,15 @@
   {{ $image = resources.Get (printf "%s%s" "images/" site.Params.defaultImage) }}
 {{ end -}}
 
-{{ $image = $image.Fill $fillImage }}
+{{ $webp := printf "%s%s" $fillImage " webp" }}
+{{ $image = $image.Resize $webp}}
+
 {{ $lqip := $image.Resize site.Params.lqipWidth -}}
 
-<img class="card-img-top img-fluid lazyload blur-up" src="{{ $lqip.Permalink }}" data-src="{{ $image.Permalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ .Title }}">
+<img
+  class="card-img-top img-fluid lazyload blur-up"
+  src="{{ $lqip.Permalink }}"
+  data-src="{{ $image.Permalink }}"
+  width="{{ $image.Width }}"
+  height="{{ $image.Height }}"
+  alt="{{ .Title }}">