Multiple components use raw <img> tags instead of Next.js Image

[navin-oss]

Title

Replace raw <img> elements with optimized Next.js Image component

Description

Several components use standard HTML image tags instead of the Next.js Image component.

Affected Files

• app/components/navbar.tsx
• app/components/contribute.tsx
• app/components/footer.tsx
• app/components/sponsor.tsx

Current Code

<img src="/mascot.png" alt="Mascot" />

Expected Behavior

Images should use the Next.js Image component to benefit from built-in optimization features.

Actual Behavior

Raw image tags bypass:

• Automatic image optimization
• Responsive image generation
• Lazy loading
• Modern format conversion

Impact

• Slower page load times
• Higher bandwidth usage
• Reduced Lighthouse performance score
• Poorer Core Web Vitals metrics

Suggested Fix

import Image from "next/image";

<Image
  src="/mascot.png"
  alt="Mascot"
  width={200}
  height={200}
/>

[navin-oss]

Assiign it to me under gssoc 2026 @pushkarscripts