diff --git a/apps/site/next.config.mjs b/apps/site/next.config.mjs
index e6d79ae34e..e61cbba79e 100644
--- a/apps/site/next.config.mjs
+++ b/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*",
diff --git a/apps/site/src/app/about/page.tsx b/apps/site/src/app/about/page.tsx
index a472e78757..78ef7d29e1 100644
--- a/apps/site/src/app/about/page.tsx
+++ b/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">
diff --git a/apps/site/src/app/careers/page.tsx b/apps/site/src/app/careers/page.tsx
index f61142f69e..d2e6707c51 100644
--- a/apps/site/src/app/careers/page.tsx
+++ b/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">
diff --git a/apps/site/src/app/client/page.tsx b/apps/site/src/app/client/page.tsx
index 2848f7351d..1003a2b26b 100644
--- a/apps/site/src/app/client/page.tsx
+++ b/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>
                 ))}
diff --git a/apps/site/src/app/orm/page.tsx b/apps/site/src/app/orm/page.tsx
index b4a4a7bab7..ae908498da 100644
--- a/apps/site/src/app/orm/page.tsx
+++ b/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}
diff --git a/apps/site/src/components/homepage/bento.tsx b/apps/site/src/components/homepage/bento.tsx
index 16a08757c7..c26a4209bc 100644
--- a/apps/site/src/components/homepage/bento.tsx
+++ b/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%)]"
         />
       )}
diff --git a/apps/site/src/components/homepage/card-section/card-section.tsx b/apps/site/src/components/homepage/card-section/card-section.tsx
index 03fee4e849..b679139b65 100644
--- a/apps/site/src/components/homepage/card-section/card-section.tsx
+++ b/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>
diff --git a/apps/site/src/components/homepage/testimonials/testimonial-item.tsx b/apps/site/src/components/homepage/testimonials/testimonial-item.tsx
index 0eafcb806f..f456ee6929 100644
--- a/apps/site/src/components/homepage/testimonials/testimonial-item.tsx
+++ b/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(
diff --git a/apps/site/src/components/logo-parade.tsx b/apps/site/src/components/logo-parade.tsx
index 3e88b9c4c1..2fe4e6839d 100644
--- a/apps/site/src/components/logo-parade.tsx
+++ b/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>
diff --git a/apps/site/src/components/postgres.tsx b/apps/site/src/components/postgres.tsx
index 046a683914..8516ddefc3 100644
--- a/apps/site/src/components/postgres.tsx
+++ b/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"
                           />
                         </>
diff --git a/apps/site/src/components/prisma-with/community-section.tsx b/apps/site/src/components/prisma-with/community-section.tsx
index 8a11e93c2f..4139b78995 100644
--- a/apps/site/src/components/prisma-with/community-section.tsx
+++ b/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"
                       />
                     ) : (
diff --git a/apps/site/src/components/prisma-with/hero.tsx b/apps/site/src/components/prisma-with/hero.tsx
index db165f8c50..53ff858ce4 100644
--- a/apps/site/src/components/prisma-with/hero.tsx
+++ b/apps/site/src/components/prisma-with/hero.tsx
@@ -1,3 +1,4 @@
+import Image from "next/image";
 import parse from "html-react-parser";
 import { cn } from "../../lib/cn";
 import { Button } from "@prisma/eclipse";
@@ -66,36 +67,56 @@ export function Hero({ data }: { data: HeroData }) {
         </div>
         <div className="logos relative max-h-78 hidden md:block">
           <div className="absolute left-0 top-0 w-57 h-44 object-cover bg-background-default flex items-center justify-center p-9 border border-stroke-ppg-weak rounded-2xl">
-            <img
-              src={data.imageUrl}
+            <div
               className={cn(
-                "dark:hidden h-full max-w-full contain",
+                "dark:hidden h-full w-full relative",
                 data.imageClassName,
               )}
-              alt={`Prisma with ${data.tech}`}
-            />
+            >
+              <Image
+                src={data.imageUrl}
+                fill
+                className="object-contain"
+                alt={`Prisma with ${data.tech}`}
+                priority={true}
+              />
+            </div>
             {data.imageUrlLight && (
-              <img
-                src={data.imageUrlLight}
+              <div
                 className={cn(
-                  "hidden dark:block h-full max-w-full contain",
+                  "hidden dark:block h-full w-full relative",
                   data.imageClassNameLight,
                 )}
-                alt={`Prisma with ${data.tech}`}
-              />
+              >
+                <Image
+                  src={data.imageUrlLight}
+                  fill
+                  className="object-contain"
+                  alt={`Prisma with ${data.tech}`}
+                  priority={true}
+                />
+              </div>
             )}
           </div>
           <div className="absolute right-0 bottom-0 w-57 h-44 object-cover bg-background-default flex items-center justify-center p-9 border border-stroke-ppg-weak rounded-2xl">
-            <img
-              src="/icons/technologies/prisma.svg"
-              className="dark:block hidden h-full contain"
-              alt="Prisma"
-            />
-            <img
-              src="/icons/technologies/prisma_light.svg"
-              className="dark:hidden h-full contain"
-              alt="Prisma"
-            />
+            <div className="dark:block hidden h-full w-full relative">
+              <Image
+                src="/icons/technologies/prisma.svg"
+                fill
+                className="object-contain"
+                alt="Prisma"
+                priority={true}
+              />
+            </div>
+            <div className="dark:hidden h-full w-full relative">
+              <Image
+                src="/icons/technologies/prisma_light.svg"
+                fill
+                className="object-contain"
+                alt="Prisma"
+                priority={true}
+              />
+            </div>
           </div>
         </div>
       </div>
diff --git a/packages/eclipse/src/components/avatar.tsx b/packages/eclipse/src/components/avatar.tsx
index d0caeb01c8..af305de48c 100644
--- a/packages/eclipse/src/components/avatar.tsx
+++ b/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 }))}
           />
         ) : (
diff --git a/packages/ui/src/components/footer.tsx b/packages/ui/src/components/footer.tsx
index d293cea09e..0f061ca4b1 100644
--- a/packages/ui/src/components/footer.tsx
+++ b/packages/ui/src/components/footer.tsx
@@ -85,7 +85,7 @@ const Footer = ({
       >
         <div className="font-inter print:hidden relative">
           {/* Logo and Social Links Column */}
-          <div className="mb-8 flex-1 lg:mb-0 w-full top-0 flex justify-between items-center lg:flex-col lg:items-start lg:absolute lg:max-w-fit lg:h-72">
+          <div className="mb-8 flex-1 lg:mb-0 w-full top-0 flex justify-between items-center lg:flex-col lg:items-start lg:absolute lg:max-w-fit lg:h-[217px]">
             <div className="flex flex-col justify-center">
               <div className="text-stroke-neutral-stronger [&>svg]:h-10!">
                 {Logo}