feat: Optimize Images Using Next.js <Image> Component

[SujalTripathi]

Description

Instructor photos and any images on the platform currently use standard
HTML <img> tags. Next.js provides an optimized <Image> component
that automatically handles lazy loading, WebP conversion, and proper
sizing — improving Core Web Vitals scores significantly.

Current Behavior

• Standard <img> tags used throughout
• No automatic image optimization
• No lazy loading on instructor photos
• No proper width/height attributes causing layout shifts (CLS)

Expected Behavior

• All <img> tags replaced with Next.js <Image> component
• Proper width, height, and alt attributes on every image
• priority prop on above-the-fold hero images
• loading="lazy" for below-fold images (default in Next.js Image)

Tech Involved

• next/image component
• next.config.mjs updated with allowed image domains

Acceptance Criteria

• All <img> tags replaced with <Image> from next/image
• width and height set on all images
• alt text present on every image
• next.config.mjs updated with remote image domains
• No layout shifts caused by images
• Hero image uses priority prop

Contributing on behalf of NSoC'26 | @Mehren7 please assign me

[SujalTripathi]

@Mehren7 please add as level3