Fix/image optimizations

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'
@@ -246,7 +245,7 @@ const config = {
   allowedDevOrigins,
   reactStrictMode: true,
   images: {
-    unoptimized: true,
+    unoptimized: false,
     remotePatterns: [
       {
         protocol: "https",
@@ -750,9 +749,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 }],
@@ -799,7 +797,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/app/about/page.tsx

@@ -1,3 +1,4 @@
+import Image from "next/image";
 import Antigravity from "../../components/homepage/antigravity";
 import { createPageMetadata } from "@/lib/page-metadata";
 import {
@@ -338,15 +339,19 @@ export default function About() {
       <div className="hero -mt-24 relative flex items-end justify-center px-4 pb-40 pt-30">
         <div className="absolute inset-0 z-1 bg-[linear-gradient(180deg,transparent_0%,var(--color-background-default)_150%)]" />
         <div className="w-screen absolute inset-0 z-0">
-          <img
+          <Image
             src="/illustrations/about/hero_bg.svg"
             alt="Hero lines"
-            className="w-full h-full object-cover object-bottom hidden dark:block"
+            fill
+            className="object-cover object-bottom hidden dark:block"
+            priority
           />
-          <img
+          <Image
             src="/illustrations/about/hero_bg_light.svg"
             alt="Hero lines"
-            className="w-full h-full object-cover object-bottom block dark:hidden"
+            fill
+            className="object-cover object-bottom block dark:hidden"
+            priority
           />
         </div>
         <div className="content relative z-2 my-12 flex flex-col gap-8 mt-30 py-12">
@@ -397,7 +402,14 @@ export default function About() {
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <img src={company.logo} alt={company.name} className="w-auto" />
+                <Image
+                  src={company.logo}
+                  alt={company.name}
+                  width={120}
+                  height={40}
+                  className="w-auto"
+                  loading="lazy"
+                />
               </a>
             ))}
           </div>
@@ -406,10 +418,13 @@ export default function About() {
             {investors.people.map((investor: any, idx: number) => (
               <div key={idx} className="p-4 flex gap-4">
                 <Avatar size="3xl">
-                  <img
+                  <Image
                     src={investor.imageUrl}
                     alt={investor.name}
+                    width={80}
+                    height={80}
                     className="w-full"
+                    loading="lazy"
                   />
                 </Avatar>
                 <div className="flex flex-col gap-1">

apps/site/src/app/careers/page.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import Image from "next/image";
 import { Action, Button } from "@prisma/eclipse";
 import { CardSection } from "@/components/homepage/card-section/card-section";
 import { StatsList } from "@/components/careers/stats-list";
@@ -184,15 +185,19 @@ export default function Careers() {
     <main className="flex-1 w-full z-1 bg-background-default">
       <div className="hero -mt-24 relative flex items-end justify-center px-4 pt-24">
         <div className="w-screen absolute inset-0 opacity-20">
-          <img
+          <Image
             src="/illustrations/careers/hero_lines.svg"
             alt="Hero lines"
-            className="w-full h-full object-cover object-bottom hidden dark:block"
+            fill
+            priority={true}
+            className="object-cover object-bottom hidden dark:block"
           />
-          <img
+          <Image
             src="/illustrations/careers/hero_lines_light.svg"
             alt="Hero lines"
-            className="w-full h-full object-cover object-bottom block dark:hidden"
+            fill
+            priority={true}
+            className="object-cover object-bottom block dark:hidden"
           />
         </div>
         <div className="content relative z-2 my-12 flex flex-col gap-8 mt-30 py-12">

apps/site/src/app/client/page.tsx

@@ -1,3 +1,4 @@
+import Image from "next/image";
 import { createPageMetadata } from "@/lib/page-metadata";
 import { Action, Button, Card } from "@prisma/eclipse";
 import API from "@/components/client/api";
@@ -235,7 +236,13 @@ export default function Client() {
                       size="4xl"
                       className="h-[75px]! w-[75px]! hover:bg-background-neutral-strong"
                     >
-                      <img src={db.icon} alt={db.name} />
+                      <Image
+                        src={db.icon}
+                        alt={db.name}
+                        width={48}
+                        height={48}
+                        loading="lazy"
+                      />
                     </Action>
                   </Technology>
                 ))}
@@ -258,7 +265,13 @@ export default function Client() {
                       size="4xl"
                       className="h-[75px]! w-[75px]! hover:bg-background-neutral-strong"
                     >
-                      <img src={fw.icon} alt={fw.name} />
+                      <Image
+                        src={fw.icon}
+                        alt={fw.name}
+                        width={48}
+                        height={48}
+                        loading="lazy"
+                      />
                     </Action>
                   </Technology>
                 ))}

apps/site/src/app/orm/page.tsx

@@ -8,6 +8,7 @@ import { InfoStats } from "@/components/orm/info-stats";
 import { cn } from "@/lib/cn";
 import { Card as FeatureCard } from "@/components/homepage/bento";
 import { YouTubePlayer } from "@prisma-docs/ui/components/youtube-player";
+import Image from "next/image";
 
 const statsSection = [
   {
@@ -334,13 +335,9 @@ export default function ORM() {
                 <Action
                   size="4xl"
                   color="orm"
-                  className={cn(index === 0 && "p-0")}
+                  className={cn(index === 0 && "p-0", "relative")}
                 >
-                  <img
-                    src={stat.icon}
-                    alt={stat.title}
-                    className="w-full h-full"
-                  />
+                  <Image src={stat.icon} alt={stat.title} fill loading="lazy" />
                 </Action>
                 <h4 className="text-2xl font-sans-display stretch-display text-foreground-neutral">
                   {stat.title}

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(

apps/site/src/components/logo-parade.tsx

@@ -1,5 +1,6 @@
 "use client";
 import { useState } from "react";
+import Image from "next/image";
 
 const logoParade = [
   {
@@ -140,11 +141,12 @@ export default function LogoParade() {
               rel="noopener noreferrer"
               className="relative shrink-0 rounded-lg overflow-hidden cursor-pointer transition-transform duration-200 invert-100 dark:brightness-150 dark:hover:filter-none contrast-75 grayscale hover:filter-none"
             >
-              <img
+              <Image
                 src={item.imageUrl}
                 width={item.width}
                 height={item.height}
                 alt={item.label}
+                loading="lazy"
                 className="w-full h-full object-contain object-center"
               />
             </a>

apps/site/src/components/postgres.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import Image from "next/image";
 import parse from "html-react-parser";
 import {
   CodeBlock,
@@ -63,36 +64,54 @@ export function PostgresTabs({ data }: { data: HowSectionData }) {
                       {body.image && (
                         <>
                           {/* Dark mode images - only visible in dark mode */}
-                          <img
+                          <Image
                             src={`${body.image}.svg`}
                             alt={body.title}
+                            width={1200}
+                            height={800}
+                            loading="lazy"
                             className="hidden lg:dark:block md:max-h-83"
                           />
-                          <img
+                          <Image
                             src={`${body.image}_tablet.svg`}
                             alt={body.title}
+                            width={1200}
+                            height={800}
+                            loading="lazy"
                             className="hidden sm:dark:block lg:dark:hidden md:max-h-83"
                           />
-                          <img
+                          <Image
                             src={`${body.image}_mobile.svg`}
                             alt={body.title}
+                            width={1200}
+                            height={800}
+                            loading="lazy"
                             className="hidden dark:block sm:dark:hidden md:max-h-83"
                           />
 
                           {/* Light mode images - only visible in light mode */}
-                          <img
+                          <Image
                             src={`${body.image}_light.svg`}
                             alt={body.title}
+                            width={1200}
+                            height={800}
+                            loading="lazy"
                             className="hidden lg:block dark:hidden md:max-h-83"
                           />
-                          <img
+                          <Image
                             src={`${body.image}_tablet_light.svg`}
                             alt={body.title}
+                            width={1200}
+                            height={800}
+                            loading="lazy"
                             className="hidden sm:block lg:hidden dark:hidden md:max-h-83"
                           />
-                          <img
+                          <Image
                             src={`${body.image}_mobile_light.svg`}
                             alt={body.title}
+                            width={1200}
+                            height={800}
+                            loading="lazy"
                             className="block sm:hidden dark:hidden md:max-h-83"
                           />
                         </>

apps/site/src/components/prisma-with/community-section.tsx

@@ -1,3 +1,4 @@
+import Image from "next/image";
 import parse from "html-react-parser";
 import { cn } from "../../lib/cn";
 import { Card, Action } from "@prisma/eclipse";
@@ -45,9 +46,12 @@ export function CommunitySection({ data }: { data: CommunitySectionData }) {
                     className="self-start flex-none"
                   >
                     {card.image ? (
-                      <img
+                      <Image
                         src={card.image}
                         alt=""
+                        width={24}
+                        height={24}
+                        loading="lazy"
                         className="h-6 w-6 object-contain"
                       />
                     ) : (