perf: enable Next.js image optimization and compress images

[Muneerali199]

Description

Currently, image optimization is disabled in the project, causing poor performance.

Problems Found

1. next.config.js has unoptimized: true - disables built-in Next.js image optimization
2. app/assets/resonate_app.png is 2.8MB - should be compressed/WebP
3. Multiple components use native <img> tags instead of next/image
4. Large PNG files not converted to WebP format

Expected Behavior

• Use next/image component throughout the site
• Convert images to WebP format
• Enable built-in image optimization pipeline
• Target: reduce hero image from 2.8MB to <500KB

Files to Modify

• next.config.js - remove unoptimized: true
• app/assets/resonate_app.png - convert to WebP
• app/components/Features/Features.jsx
• app/components/TechStack/TechStack.jsx
• app/components/About/About.jsx
• app/components/Layout/NavBar/index.jsx
• app/components/DownloadApp/DownloadApp.jsx

Motivation

Image optimization can improve page load time by 50%+ and significantly boost Core Web Vitals scores (LCP, CLS).

[van456-dot]

Hi team,

I explored this issue and started working on image optimization across the project.

-> Converted resonate_app.png → resonate_app.webp (~114KB)
-> Migrated key components to use next/image:
Features, TechStack, About, NavBar, DownloadApp

Investigated next.config.js behavior with static export

Important finding

Since the project uses output: 'export', Next.js Image Optimization API is not available.
This means we must keep images.unoptimized: true to avoid runtime errors.

So while next/image still provides responsive behavior, full runtime optimization is not possible without switching away from static export.

Next steps

• Complete remaining PNG → WebP conversions
• Verify layout consistency and responsiveness

I’ll be opening a PR shortly with these changes. Please let me know if you’d like any adjustments in approach.

Thanks!