From a2322cd208aa76117f9d9b193b3786a4099317cf Mon Sep 17 00:00:00 2001
From: ArshVermaGit <arshverma.dev@gmail.com>
Date: Sat, 30 May 2026 01:20:18 +0530
Subject: [PATCH] perf(ui): optimize images using Next.js Image component

---
 next.config.mjs                        |  4 ++++
 src/app/compare/[users]/page.tsx       |  8 +++++---
 src/app/leaderboard/page.tsx           |  8 +++++---
 src/components/BadgeSection.tsx        | 13 +++++--------
 src/components/FriendComparison.tsx    |  8 +++++---
 src/components/GitHubAchievements.tsx  |  6 ++++--
 src/components/WrappedExperience.tsx   |  7 +++++--
 src/components/landing/LandingPage.tsx |  6 +++---
 8 files changed, 36 insertions(+), 24 deletions(-)

diff --git a/next.config.mjs b/next.config.mjs
index c7f4edcb..6bc575c0 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -132,6 +132,10 @@ const nextConfig = {
         protocol: "https",
         hostname: "avatars.githubusercontent.com",
       },
+      {
+        protocol: "https",
+        hostname: "github.githubassets.com",
+      },
     ],
   },
   async headers() {
diff --git a/src/app/compare/[users]/page.tsx b/src/app/compare/[users]/page.tsx
index 8d51654a..ae854923 100644
--- a/src/app/compare/[users]/page.tsx
+++ b/src/app/compare/[users]/page.tsx
@@ -1,5 +1,6 @@
 import { Metadata } from "next";
 import { Scale, Trophy } from "lucide-react";
+import Image from "next/image";
 import { normalizeGitHubUsername } from "@/lib/validate-github-username";
 import {
   fetchPublicProfile,
@@ -224,10 +225,11 @@ function ProfileHeader({
           align === "right" ? "md:flex-row-reverse" : ""
         }`}
       >
-        {/* eslint-disable-next-line @next/next/no-img-element */}
-        <img
+        <Image
           src={`https://avatars.githubusercontent.com/${profile.username}`}
-          alt=""
+          alt={`${profile.username} avatar`}
+          width={56}
+          height={56}
           className="h-14 w-14 rounded-full border border-[var(--border)]"
         />
         <div className="min-w-0">
diff --git a/src/app/leaderboard/page.tsx b/src/app/leaderboard/page.tsx
index b3f8fd67..2b40b61c 100644
--- a/src/app/leaderboard/page.tsx
+++ b/src/app/leaderboard/page.tsx
@@ -1,4 +1,5 @@
 import Link from "next/link";
+import Image from "next/image";
 import EmptyState from "@/components/EmptyState";
 import SponsorBadge from "@/components/SponsorBadge";
 
@@ -146,10 +147,11 @@ export default async function LeaderboardPage({
                     #{entry.rank}
                   </div>
                   <div className="flex min-w-0 items-center gap-3">
-                    {/* eslint-disable-next-line @next/next/no-img-element */}
-                    <img
+                    <Image
                       src={entry.avatarUrl}
-                      alt=""
+                      alt={`${entry.username} avatar`}
+                      width={40}
+                      height={40}
                       className="h-10 w-10 rounded-full border border-[var(--border)]"
                     />
                     <div className="min-w-0">
diff --git a/src/components/BadgeSection.tsx b/src/components/BadgeSection.tsx
index 392054ab..7aaa1f9a 100644
--- a/src/components/BadgeSection.tsx
+++ b/src/components/BadgeSection.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useState, useEffect } from "react";
+import Image from "next/image";
 
 interface BadgeSectionProps {
   username: string;
@@ -49,8 +50,7 @@ export default function BadgeSection({ username }: BadgeSectionProps) {
             Streak Badge
           </h3>
           <div className="mb-2">
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img src={streakBadgePreviewUrl} alt="DevTrack Streak" />
+            <Image src={streakBadgePreviewUrl} alt="DevTrack Streak" width={150} height={20} className="w-auto h-auto" unoptimized />
           </div>
           <CopyableCodeBlock code={streakMarkdown} />
         </div>
@@ -61,8 +61,7 @@ export default function BadgeSection({ username }: BadgeSectionProps) {
             Commits Badge
           </h3>
           <div className="mb-2">
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img src={commitsBadgePreviewUrl} alt="DevTrack Commits" />
+            <Image src={commitsBadgePreviewUrl} alt="DevTrack Commits" width={150} height={20} className="w-auto h-auto" unoptimized />
           </div>
           <CopyableCodeBlock code={commitsMarkdown} />
         </div>
@@ -73,10 +72,8 @@ export default function BadgeSection({ username }: BadgeSectionProps) {
             Combined (Both Badges)
           </h3>
           <div className="mb-2 flex gap-1">
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img src={streakBadgePreviewUrl} alt="DevTrack Streak" />
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img src={commitsBadgePreviewUrl} alt="DevTrack Commits" />
+            <Image src={streakBadgePreviewUrl} alt="DevTrack Streak" width={150} height={20} className="w-auto h-auto" unoptimized />
+            <Image src={commitsBadgePreviewUrl} alt="DevTrack Commits" width={150} height={20} className="w-auto h-auto" unoptimized />
           </div>
           <CopyableCodeBlock code={combinedMarkdown} />
         </div>
diff --git a/src/components/FriendComparison.tsx b/src/components/FriendComparison.tsx
index a484ac9d..08d010d7 100644
--- a/src/components/FriendComparison.tsx
+++ b/src/components/FriendComparison.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useMemo, useRef, useState } from "react";
+import Image from "next/image";
 import dynamic from "next/dynamic";
 
 const ComparisonChart = dynamic(() => import("./ComparisonChart"), { ssr: false });
@@ -265,10 +266,11 @@ export default function FriendComparison() {
                         : "hover:bg-[var(--control)]",
                     ].join(" ")}
                   >
-                    {/* eslint-disable-next-line @next/next/no-img-element */}
-                    <img
+                    <Image
                       src={u.avatarUrl}
-                      alt=""
+                      alt={`${u.username} avatar`}
+                      width={20}
+                      height={20}
                       className="h-5 w-5 rounded-full"
                       loading="lazy"
                     />
diff --git a/src/components/GitHubAchievements.tsx b/src/components/GitHubAchievements.tsx
index 749f4580..05f64d24 100644
--- a/src/components/GitHubAchievements.tsx
+++ b/src/components/GitHubAchievements.tsx
@@ -1,3 +1,4 @@
+import Image from "next/image";
 import type { GitHubAchievement } from "@/lib/github-achievements";
 
 interface GitHubAchievementsProps {
@@ -52,10 +53,11 @@ export default function GitHubAchievements({
               title={achievement.description}
               className="group rounded-lg border border-[var(--border)] bg-[var(--control)] p-3 text-center transition-colors hover:border-[var(--accent)]"
             >
-              {/* eslint-disable-next-line @next/next/no-img-element */}
-              <img
+              <Image
                 src={achievement.imageUrl}
                 alt={`${achievement.title} GitHub achievement badge`}
+                width={56}
+                height={56}
                 className="mx-auto h-14 w-14 object-contain"
                 loading="lazy"
               />
diff --git a/src/components/WrappedExperience.tsx b/src/components/WrappedExperience.tsx
index 88469423..83526faf 100644
--- a/src/components/WrappedExperience.tsx
+++ b/src/components/WrappedExperience.tsx
@@ -2,6 +2,7 @@
 
 import { useEffect, useMemo, useState } from "react";
 import Link from "next/link";
+import Image from "next/image";
 import type { WrappedStats } from "@/lib/wrapped";
 
 const SLIDE_THEMES = [
@@ -306,11 +307,13 @@ export default function WrappedExperience() {
                   <p className="mt-1 text-sm text-slate-300">
                     Generated from your selected year.
                   </p>
-                  {/* eslint-disable-next-line @next/next/no-img-element */}
-                  <img
+                  <Image
                     src={getOgImageUrl(stats)}
                     alt={`${stats.year} Year in Code share card for ${stats.username}`}
+                    width={1200}
+                    height={630}
                     className="mt-4 aspect-[1200/630] w-full rounded-md border border-white/10 object-cover"
+                    unoptimized
                   />
                   <div className="mt-4 grid grid-cols-1 gap-2 sm:grid-cols-2">
                     <a
diff --git a/src/components/landing/LandingPage.tsx b/src/components/landing/LandingPage.tsx
index 7490a0d1..2b8e5a21 100644
--- a/src/components/landing/LandingPage.tsx
+++ b/src/components/landing/LandingPage.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useEffect, useRef, useState } from 'react';
+import Image from "next/image";
 
 /* ═══════════════════════════════════════════════════════════
    PUBLIC TYPES
@@ -811,9 +812,8 @@ function ContributeSection({ stats }: { stats: RepoStats }) {
                 el.style.zIndex = String(stats.contributors.length - i);
               }}
             >
-              {/* eslint-disable-next-line @next/next/no-img-element */}
-              <img
-                src={`${c.avatar_url}&s=76`}
+              <Image
+                src={c.avatar_url}
                 alt={c.login}
                 width={38}
                 height={38}