AOSSIE-Org / AOSSIE-Org/Resonate-Website

perf: enable Next.js image optimization and compress images

Offen
#344 2 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
TypeScript
Sterne
43
Forks
154
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

## 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 `` 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).

Beitragsleitfaden

Beitragsleitfaden öffnen

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.