Update image and avatar

Author: Carla Goncalves

apps/site/next.config.mjs

@@ -30,11 +30,10 @@ if (
       !process.env.NEXT_BLOG_ORIGIN && "BLOG_ORIGIN is required in production",
     ]
       .filter(Boolean)
-      .join("; ")
+      .join("; "),
   );
 }
 
-
 const ContentSecurityPolicy = `
   default-src 'self';
   script-src 'self' 'unsafe-inline' 'unsafe-eval'
@@ -257,7 +256,7 @@ const config = {
   allowedDevOrigins,
   reactStrictMode: true,
   images: {
-    unoptimized: true,
+    unoptimized: false,
     remotePatterns: [
       {
         protocol: "https",
@@ -757,9 +756,8 @@ const config = {
           destination: "https://accelerate-speed-test.vercel.app/:path*",
         },
 
-
-         // Proxy canonical docs path to docs infrastructure
-         {
+        // Proxy canonical docs path to docs infrastructure
+        {
           source: "/docs",
           destination: `${DOCS_ORIGIN}/docs`,
           missing: [{ type: "host", value: DOCS_ORIGIN_HOST }],
@@ -806,7 +804,6 @@ const config = {
         // Pages
         // TODO We have a redirect for this above to /careers, so should probably be removed here?
 
-       
         {
           source: "/dataguide/:any*",
           destination: "https://dataguide.vercel.app/dataguide/:any*",

apps/site/src/components/homepage/bento.tsx

@@ -2,6 +2,7 @@
 
 import { useCallback, useEffect, useRef, useState } from "react";
 import Link from "next/link";
+import Image from "next/image";
 import { Action } from "@prisma/eclipse";
 import { cn } from "@prisma-docs/ui/lib/cn";
 import { useTheme } from "@prisma-docs/ui/components/theme-provider";
@@ -193,14 +194,16 @@ export const Card = ({ card, color }: CardProps) => {
         </div>
       </div>
       {card.image && (
-        // eslint-disable-next-line @next/next/no-img-element
-        <img
+        <Image
           src={
             mounted && resolvedTheme === "light"
               ? `${card.image}_light.svg`
               : `${card.image}.svg`
           }
           alt={card.title}
+          width={1200}
+          height={800}
+          loading="lazy"
           className="px-4 z-2 pt-0 pb-0 min-w-full min-h-[60%] object-fill object-[top_left] [mask-image:linear-gradient(to_bottom,rgba(0,0,0,1)_60%,transparent_90%)] [-webkit-mask-image:linear-gradient(to_bottom,rgba(0,0,0,1)_60%,transparent_90%)]"
         />
       )}

apps/site/src/components/homepage/card-section/card-section.tsx

@@ -6,6 +6,7 @@ import { useInView } from "react-intersection-observer";
 import { cn } from "../../../lib/cn";
 import { useTheme } from "@prisma-docs/ui/components/theme-provider";
 import { Action } from "@prisma/eclipse";
+import Image from "next/image";
 
 interface TwoColumnItem {
   content: ReactNode;
@@ -166,8 +167,8 @@ export const CardSection = ({ cardSection }: CardSectionProps) => {
                     <LogoGrid color={item.color} />
                   )}
                   {item.visualType === "image" && item.imageUrl && (
-                    <div key={`images-${index}`}>
-                      <img
+                    <div key={`images-${index}`} className="relative w-full">
+                      <Image
                         key={`desktop-img-${index}`}
                         className={cn(
                           "hidden sm:block w-full h-auto",
@@ -180,9 +181,13 @@ export const CardSection = ({ cardSection }: CardSectionProps) => {
                             : `${item.imageUrl}.svg`
                         }
                         alt={item.imageAlt || ""}
+                        width={1200}
+                        height={800}
+                        priority={index === 0}
+                        loading={index === 0 ? "eager" : "lazy"}
                       />
                       {item.mobileImageUrl && (
-                        <img
+                        <Image
                           key={`mobile-img-${index}`}
                           className={cn(
                             "w-full h-auto sm:hidden",
@@ -195,6 +200,10 @@ export const CardSection = ({ cardSection }: CardSectionProps) => {
                               : `${item.mobileImageUrl}.svg`
                           }
                           alt={item.mobileImageAlt || ""}
+                          width={800}
+                          height={600}
+                          priority={index === 0}
+                          loading={index === 0 ? "eager" : "lazy"}
                         />
                       )}
                     </div>

apps/site/src/components/homepage/testimonials/testimonial-item.tsx

@@ -44,6 +44,7 @@ export const TestimonialItem = ({
           imageUrl || "https://avatar.vercel.sh/" + encodeURIComponent(author)
         }
         alt={imageAlt || `Profile photo of ${author}`}
+        loading="lazy"
       ></Avatar>
       <div
         className={cn(

packages/eclipse/src/components/avatar.tsx

@@ -66,6 +66,10 @@ export interface AvatarProps extends Omit<
    * Alt text for image format
    */
   alt?: string;
+  /**
+   * Loading behavior for image format
+   */
+  loading?: "lazy" | "eager";
   /**
    * Icon or initials content
    */
@@ -108,6 +112,7 @@ const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
       format = "image",
       src,
       alt,
+      loading,
       children,
       ...props
     },
@@ -123,6 +128,7 @@ const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
           <img
             src={src}
             alt={alt || "Avatar"}
+            loading={loading}
             className={cn(avatarContentVariants({ format }))}
           />
         ) : (