Fixed pixelated feature image issue

TryGhost · Jul 16, 2024 · 3e765a1 · 3e765a1
1 parent 4af7426
commit 3e765a1
Showing 1 changed file with 10 additions and 8 deletions.
diff --git a/partials/feature-image.hbs b/partials/feature-image.hbs
@@ -1,13 +1,15 @@
 {{#if feature_image}}
     <figure class="gh-article-image">
-        <picture>
-            <source srcset="{{img_url feature_image size="xxl"}}" media="(min-width: 2000px)">
-            <source srcset="{{img_url feature_image size="xl"}}" media="(min-width: 1200px)">
-            <source srcset="{{img_url feature_image size="l"}}" media="(min-width: 960px)">
-            <source srcset="{{img_url feature_image size="m"}}" media="(min-width: 600px)">
-            <source srcset="{{img_url feature_image size="s"}}" media="(min-width: 320px)">
-            <img src="{{img_url feature_image size="xl"}}" alt="{{title}}">
-        </picture>
+        <img
+            srcset="{{img_url feature_image size="s"}} 320w,
+                    {{img_url feature_image size="m"}} 600w,
+                    {{img_url feature_image size="l"}} 960w,
+                    {{img_url feature_image size="xl"}} 1200w,
+                    {{img_url feature_image size="xxl"}} 2000w"
+            sizes="(max-width: 1200px) 100vw, 1120px"
+            src="{{img_url feature_image size="xl"}}"
+            alt="{{title}}"
+        >
         {{#if feature_image_caption}}
             <figcaption>{{feature_image_caption}}</figcaption>
         {{/if}}