diff --git a/src/app/api/og/user/route.tsx b/src/app/api/og/user/route.tsx
index c54e309c5..8b3c34212 100644
--- a/src/app/api/og/user/route.tsx
+++ b/src/app/api/og/user/route.tsx
@@ -33,6 +33,7 @@ export async function GET(req: NextRequest) {
           
           <div style={{ display: "flex", alignItems: "center", gap: "28px" }}>
             {avatar ? (
+              // eslint-disable-next-line @next/next/no-img-element 
               <img src={avatar} alt={`${username} avatar`} width={100} height={100} style={{ borderRadius: "50%", border: "3px solid rgba(99,102,241,0.7)", objectFit: "cover" }} />
             ) : (
               <div style={{ width: "100px", height: "100px", borderRadius: "50%", background: "linear-gradient(135deg,#6366f1,#10b981)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "44px", fontWeight: 700, color: "#fff" }}>
diff --git a/src/app/compare/[users]/page.tsx b/src/app/compare/[users]/page.tsx
index b56c5737e..fa4e35efe 100644
--- a/src/app/compare/[users]/page.tsx
+++ b/src/app/compare/[users]/page.tsx
@@ -229,6 +229,7 @@ function ProfileHeader({
           alt={`${profile.username} avatar`}
           width={56}
           height={56}
+          unoptimized
           className="h-14 w-14 rounded-full border border-[var(--border)]"
         />
         <div className="min-w-0">
diff --git a/src/app/dashboard/settings/page.tsx b/src/app/dashboard/settings/page.tsx
index 41cba8a5c..143d74564 100644
--- a/src/app/dashboard/settings/page.tsx
+++ b/src/app/dashboard/settings/page.tsx
@@ -17,6 +17,7 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { useLocale, useTranslations } from "next-intl";
 import { localeMetadata, locales, type AppLocale } from "@/i18n/config";
+import Image from "next/image";
 
 // ── Max length for the profile bio ──────────────────────────────────────────
 const BIO_MAX = 160;
@@ -1697,10 +1698,13 @@ function SettingsPageContent() {
                               className="flex items-center justify-between rounded-lg border border-[var(--border)] bg-[var(--control)] p-3"
                             >
                               <div className="flex items-center gap-3">
-                                <img
+                                <Image
                                   src={org.avatarUrl}
                                   alt={org.login}
+                                  width={32}
+                                  height={32}
                                   className="w-8 h-8 rounded"
+                                  unoptimized
                                 />
                                 <span className="text-sm font-semibold text-[var(--card-foreground)]">
                                   {org.login}
diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx
index 9cec5a29a..06743807d 100644
--- a/src/app/settings/page.tsx
+++ b/src/app/settings/page.tsx
@@ -6,6 +6,7 @@ import { useSession } from "next-auth/react";
 import { redirect, useSearchParams } from "next/navigation";
 import { toast } from "sonner";
 import Link from "next/link";
+import Image from "next/image";
 
 // ── Types ─────────────────────────────────────────────────────────────────────
 
@@ -66,13 +67,12 @@ function GitHubAvatar({
   size?: number;
 }) {
   return (
-    <img
+    <Image
       src={`https://github.com/${login}.png?size=${size * 2}`}
       alt={`${login} avatar`}
       width={size}
       height={size}
       className="rounded-full border border-[var(--border)]"
-      loading="lazy"
     />
   );
 }
diff --git a/src/components/ProfileCard.tsx b/src/components/ProfileCard.tsx
index 6b53f5b0f..52851eb52 100644
--- a/src/components/ProfileCard.tsx
+++ b/src/components/ProfileCard.tsx
@@ -2,6 +2,8 @@
 import React from "react";
 import Link from "next/link";
 import "./ProfileCard.css";
+import Image from "next/image";
+
 
 export type SocialLink = {
   href: string;
@@ -35,10 +37,13 @@ export default function ProfileCard({
     <article className={`profile-card ${className}`.trim()} aria-label={`Profile card: ${name}`}>
       <div className="profile-card__left">
         <div className="profile-card__leftHeader">
-          <img
+          <Image
             src={avatarUrl || "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=512&q=80&auto=format&fit=crop"}
             alt={`Avatar of ${name}`}
+            width={128}
+            height={128}
             className="profile-card__avatar profile-card__avatar--large"
+            unoptimized
           />
 
           <div className="profile-card__meta">
diff --git a/src/components/SponsorAnalytics.tsx b/src/components/SponsorAnalytics.tsx
index 3be064ed4..9289c62e2 100644
--- a/src/components/SponsorAnalytics.tsx
+++ b/src/components/SponsorAnalytics.tsx
@@ -4,6 +4,8 @@ import { useCallback, useEffect, useState, useMemo } from "react";
 import { Heart, Users, DollarSign, RefreshCw, Trophy, Info, ExternalLink } from "lucide-react";
 import { ResponsiveContainer, LineChart, Line, YAxis, Tooltip, XAxis } from "recharts";
 import { toast } from "sonner";
+import Image from "next/image";
+
 
 interface ActiveSponsor {
   login: string;
@@ -361,10 +363,12 @@ function SponsorAvatar({ sponsor, tierType }: { sponsor: ActiveSponsor; tierType
   }[tierType];
 
   const content = sponsor.avatarUrl ? (
-    <img
+    <Image
       src={sponsor.avatarUrl}
       alt={sponsor.name}
-      className="h-full w-full object-cover"
+      fill
+      unoptimized
+      className="object-cover"
     />
   ) : (
     <div className="h-full w-full flex items-center justify-center bg-[var(--border)] text-[var(--muted-foreground)] font-bold text-[10px]">