From 0243a4c32fb868d2926f05c109a1c720dfeb73e8 Mon Sep 17 00:00:00 2001
From: rizaldy <oss@rizaldy.club>
Date: Wed, 28 Feb 2024 01:45:51 +0700
Subject: [PATCH] feat: use next-image-export-optimizer

---
 components/Feed.js    | 11 ++++++++++-
 components/Navbar.js  |  9 ++++++++-
 components/Profile.js |  6 +++++-
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/components/Feed.js b/components/Feed.js
index e03583c..0d5e5e7 100644
--- a/components/Feed.js
+++ b/components/Feed.js
@@ -1,3 +1,5 @@
+import ExportedImage from "next-image-export-optimizer";
+
 const Feed = ({
   media,
   type,
@@ -24,7 +26,14 @@ const Feed = ({
             });
           }}
         >
-          <img alt={url} loading="lazy" src={previewPath} className={`aspect-${type} bg-neutral-100 dark:bg-neutral-900`} />
+          <ExportedImage
+            alt={url}
+            loading="lazy"
+            src={previewPath}
+            width="512"
+            height="512"
+            className={`aspect-${type} bg-neutral-100 dark:bg-neutral-900`}
+          />
         </a>
       ))}
   </main>
diff --git a/components/Navbar.js b/components/Navbar.js
index 45b246c..119d400 100644
--- a/components/Navbar.js
+++ b/components/Navbar.js
@@ -1,4 +1,5 @@
 import Link from "next/link";
+import ExportedImage from "next-image-export-optimizer";
 
 const Navbar = ({ name, logo }) => (
   <nav className="flex py-2 border-b dark:border-neutral-800 hover:opacity-70">
@@ -6,7 +7,13 @@ const Navbar = ({ name, logo }) => (
       <div className="md:w-2/12">
         <Link href="/">
           {logo ? (
-            <img alt={name} src={logo} className="w-full" />
+            <ExportedImage
+              alt={name}
+              src={logo}
+              width={224}
+              height={56}
+              className="w-full"
+            />
           ) : (
             <h1 className="font-bold leading-relaxed tracking-tight text-2xl text-neutral-800">
               {name}
diff --git a/components/Profile.js b/components/Profile.js
index 5215fca..86aa77e 100644
--- a/components/Profile.js
+++ b/components/Profile.js
@@ -1,10 +1,14 @@
+import ExportedImage from "next-image-export-optimizer";
+
 const Profile = ({ profile, totalPosts }) => (
   <div className="flex flex-warp">
     <div className="lg:w-4/12 w-3/12 md:py-10 ml-3 md:ml-0 lg:px-20 md:px-10">
-      <img
+      <ExportedImage
         loading="lazy"
         alt={profile.display_name}
         src={profile.avatar}
+        width={250}
+        height={250}
         className="w-full rounded-full mx-auto border bg-neutral-100 border-gray-200 p-1 dark:border-neutral-800 dark:bg-black"
       />
     </div>