diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 8ed624d..f31904e 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -29,9 +29,9 @@
       <div class="album-layout">
         <picture class="album-cover">
           {{ $original := resources.Get .Params.cover }}
-          {{ $coverSmall := $original.Resize "x250" }}
-          {{ $coverMedium := $original.Resize "x500" }}
-          {{ $coverBig := $original.Resize "x1000" }}
+          {{ $coverSmall := $original.Resize "x250 webp" }}
+          {{ $coverMedium := $original.Resize "x500 webp" }}
+          {{ $coverBig := $original.Resize "x1000 webp" }}
           {{ $placeholder := $original.Resize "x1" }}
           <source srcset="{{ $coverSmall.Permalink }} 1x, {{ $coverMedium.Permalink }} 2x" media="(max-width: 427px)">
           <source srcset="{{ $coverMedium.Permalink }} 1x, {{ $coverBig.Permalink }} 2x" media="(max-width: 480px)">
diff --git a/layouts/index.html b/layouts/index.html
index 3d7569e..bdb28e0 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -36,9 +36,9 @@
           {{ range sort $paginator.Pages "Date" "desc" }}
             {{ $original := resources.Get .Params.cover }}
             {{ $originalPermalink := $original.Permalink }}
-            {{ $cover := $original.Resize "x320" }}
-            {{ $cover2x := $original.Resize "x640" }}
-            {{ $placeholder := $cover.Resize "x1" }}
+            {{ $cover := $original.Resize "x320 webp" }}
+            {{ $cover2x := $original.Resize "x640 webp" }}
+            {{ $placeholder := $cover.Resize "x1 png" }}
             <div class="catalog-item">
               <a class="catalog-item__content" href="{{ .Permalink }}">
                 <h2 class="catalog-item__album">{{ .Title }}</h2>