update the feature image UI

Author: officialrajdeepsingh

partials/featureImage.hbs

@@ -1,16 +1,36 @@
 {{#if feature_image}}
-    <div class="flex flex-col my-10 m-auto ">
-        <img class="m-auto p-2 w-10/12 xl:h-[724px] 2xl:h-[724px]"
-            srcset="{{img_url feature_image size="s"}} 300w,
-            {{img_url feature_image size="m"}} 600w,
-            {{img_url feature_image size="l"}} 1000w,
-            {{img_url feature_image size="xl"}} 2000w" sizes="(max-width: 1000px) 400px, 700px"
-            src="{{img_url feature_image size="m"}}"
-            alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}" />
-        {{#if feature_image_caption}}
-        <p class="text-center mt-1 text-sm">
-            {{feature_image_caption}}
-        </p>
-        {{/if}}
-    </div>
-    {{/if}}
+
+<picture class="w-full h-[724px] my-10 mx-auto ">
+    <!-- Serve the AVIF format if the browser supports it -->
+    <!-- Remove this block when using animated images as feature images -->
+    <source 
+        srcset="{{img_url feature_image size="s" format="avif"}} 300w,
+                {{img_url feature_image size="m" format="avif"}} 600w,
+                {{img_url feature_image size="l" format="avif"}} 1000w,
+                {{img_url feature_image size="xl" format="avif"}} 2000w"
+        sizes="(min-width: 1400px) 1400px, 92vw" 
+        type="image/avif"
+    >
+    <!-- Serve the WebP format if the browser supports it -->
+    <source 
+        srcset="{{img_url feature_image size="s" format="webp"}} 300w,
+                {{img_url feature_image size="m" format="webp"}} 600w,
+                {{img_url feature_image size="l" format="webp"}} 1000w,
+                {{img_url feature_image size="xl" format="webp"}} 2000w"
+        sizes="(min-width: 1400px) 1400px, 92vw" 
+        type="image/webp"
+    >
+    <!-- Serve original file format as a fallback -->
+    <img
+        srcset="{{img_url feature_image size="s"}} 300w,
+                {{img_url feature_image size="m"}} 600w,
+                {{img_url feature_image size="l"}} 1000w,
+                {{img_url feature_image size="xl"}} 2000w"
+        sizes="(min-width: 1400px) 1400px, 92vw"
+        src="{{img_url feature_image size="xl"}}"
+        class="object-cover w-full h-full"
+        alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
+    >
+</picture>
+
+{{/if}}