feat: images lazy loading

Author: hieuddo

src/app/layout.tsx

@@ -1,9 +1,11 @@
 import type { Metadata } from "next";
 import "./globals.css";
 import Link from "next/link";
+import Image from "next/image";
 import Navigation from "@/components/Navigation";
 import TeamPhotos from "@/components/TeamPhotos";
 import { getAllCategories } from "@/lib/markdown-posts";
+import BrandLogo from "@/assets/Brand.png";
 
 export const metadata: Metadata = {
   title: "Preferred.AI",
@@ -30,10 +32,11 @@ export default function RootLayout({
               <div className="flex items-center justify-between gap-4 py-6">
                 <Link href="/" className="inline-block">
                   <div className="flex items-center gap-3">
-                    <img
-                      src="/Brand.png"
+                    <Image
+                      src={BrandLogo}
                       alt="Preferred.AI"
                       className="h-16 w-auto"
+                      priority
                     />
                     <p className="hidden text-sm italic text-gray-600 lg:block">
                       Preferences and Recommendations from Data & AI

src/assets/Brand.png

@@ -1,5 +1,7 @@
 "use client";
 
+import Image from "next/image";
+
 import { useState, useEffect } from "react";
 import { TEAM_PHOTOS } from "@/data/teamPhotos";
 
@@ -40,9 +42,12 @@ export default function TeamPhotos() {
             isVisible ? "opacity-100" : "opacity-0"
           }`}
         >
-          <img
+          <Image
             src={TEAM_PHOTOS[currentIndex].url}
             alt={`${TEAM_PHOTOS[currentIndex].date} - ${TEAM_PHOTOS[currentIndex].location}`}
+            width={0}
+            height={0}
+            sizes="100vw"
             className="h-auto w-full object-cover"
           />
         </div>

src/components/TeamPhotos.tsx

@@ -36,6 +36,7 @@ export default function rehypeFigure() {
               ...node,
               properties: {
                 ...node.properties,
+                loading: 'lazy',
               },
             },
           ],