From 13f693e91889719b92ec1dca78e7ed3f86ac1b9f Mon Sep 17 00:00:00 2001
From: SkyfallWasTaken <mahadkalam1@proton.me>
Date: Sun, 14 Jul 2024 19:45:15 +0100
Subject: [PATCH] Image to Picture tag

---
 src/layouts/BlogPost.astro | 4 ++--
 src/pages/blog/index.astro | 5 +++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
index a35d32a..9f44af5 100644
--- a/src/layouts/BlogPost.astro
+++ b/src/layouts/BlogPost.astro
@@ -1,7 +1,7 @@
 ---
 import type { CollectionEntry } from "astro:content";
 import type { ImageMetadata } from "astro";
-import { Image } from "astro:assets";
+import { Picture } from "astro:assets";
 
 import BaseHead from "../components/BaseHead.astro";
 import Header from "../components/Header.astro";
@@ -53,7 +53,7 @@ if (heroImage) {
           <div class="w-[1/4] flex justify-center">
             {
               heroImagePromise && (
-                <Image src={heroImagePromise()} loading="eager" alt="" />
+                <Picture src={heroImagePromise()} formats={['avif', 'webp']} loading="eager" alt="" />
               )
             }
           </div>
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 4dcfde9..c7b0e58 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -5,7 +5,7 @@ import Footer from "../../components/Footer.astro";
 import { SITE_TITLE, SITE_DESCRIPTION } from "../../consts";
 import { getCollection } from "astro:content";
 import FormattedDate from "../../components/FormattedDate.astro";
-import { Image } from "astro:assets";
+import { Picture } from "astro:assets";
 
 const posts = (await getCollection("blog")).sort(
   (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
@@ -58,11 +58,12 @@ let imagesLoadedEagerly = 0;
                     {() => {
                       if (heroImagePromise) {
                         return (
-                          <Image
+                          <Picture
                             width={720}
                             height={360}
                             src={heroImagePromise()}
                             loading={shouldLoadEagerly ? "eager" : "lazy"}
+                            formats={['avif', 'webp']}
                             class="rounded-md mb-3"
                             alt=""
                           />