feat: change image formats and quality

Signed-off-by: Thaddeus Kuah <[email protected]>
thaddeuskkr · Feb 27, 2025 · cc08ec6 · cc08ec6
1 parent 8b5de55
commit cc08ec6
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/src/pages/about.astro b/src/pages/about.astro
@@ -1,5 +1,5 @@
 ---
-import { Picture } from "astro:assets";
+import { Image } from "astro:assets";
 import noelGiftsLogo from "../assets/noel-logo.png";
 import portraitImage from "../assets/portrait.jpg";
 import Navigation from "../components/Navigation.astro";
@@ -12,13 +12,13 @@ const path = Astro.url.pathname.replace(/\//g, "");
     <Navigation active={path} />
     <div class="mx-auto mb-16 max-w-5xl px-6">
         <div class="flex flex-col items-center justify-center md:flex-row">
-            <Picture
+            <Image
                 src={portraitImage}
                 alt="Portrait"
                 class="mb-6 aspect-square max-w-80 rounded-xl md:mr-6 md:mb-0"
                 loading="eager"
-                width="500"
-                densities={[1, 1.5, 2, 2.5, 3]}
+                format="avif"
+                quality={"mid"}
             />
             <div class="text-center md:text-left">
                 <h1 class="mb-1 text-3xl font-bold">Thaddeus Kuah</h1>
@@ -113,13 +113,13 @@ const path = Astro.url.pathname.replace(/\//g, "");
         <div class="mb-4 flex flex-col gap-4">
             <h2 class="text-xl font-bold">Work Experience</h2>
             <div class="flex flex-row items-center gap-4">
-                <Picture
+                <Image
                     src={noelGiftsLogo}
                     alt="Noel Gifts Logo"
                     class="aspect-square size-18"
-                    width="250"
-                    densities={[1, 1.5, 2, 2.5, 3]}
                     loading="eager"
+                    format="avif"
+                    quality={"mid"}
                 />
                 <div class="flex flex-col justify-center">
                     <span class="font-semibold text-zinc-100">Operations Assistant</span>

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -14,8 +14,8 @@ import "../styles/global.css";
                     alt="Profile"
                     class="mb-5 aspect-square w-full max-w-full rounded-xl transition-transform"
                     loading="eager"
-                    width="1000"
-                    densities={[1, 1.5, 2, 2.5, 3]}
+                    format="avif"
+                    quality={"mid"}
                 />
                 <h1 class="mb-2 text-4xl font-semibold whitespace-nowrap text-purple-300">thaddeus kuah</h1>
             </div>