feat: use next-image-export-optimizer

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>

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}

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>