AOSSIE-Org / AOSSIE-Org/Resonate-Website

UI/UX & Performance: Refactor native `<img>` tags to Next.js `<Image>` components

Abierto
#341 5 comentarios 0 reacciones 0 asignados Ver en GitHub
Lenguaje dominante
TypeScript
Estrellas
43
Forks
154
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

### 🎨 The UI/UX Update

The website currently uses standard HTML `` tags for displaying static assets (like `roomscreen.png` and `aossie_logo.png` in the [Features] and [About] components).

From a UX perspective, this approach lacks modern image loading optimizations like "blur-up" placeholders or proper structural bounding boxes, which can lead to jarring rendering or Layout Shifts as the images load. Additionally, it misses out on Next.js's built-in performance optimizations (like automatic WebP compression and lazy loading), which negatively impacts the site's Core Web Vitals and overall perceived speed.

### Current Design Issues

The website currently uses standard HTML `` tags for displaying static assets (like `roomscreen.png` and `aossie_logo.png` in the [Features]) and [About] components).

From a UX perspective, this approach lacks modern image loading optimizations like "blur-up" placeholders or proper structural bounding boxes, which can lead to jarring rendering or Layout Shifts as the images load. Additionally, it misses out on Next.js's built-in performance optimizations (like automatic WebP compression and lazy loading), which negatively impacts the site's Core Web Vitals and overall perceived speed.

### Proposed Solution

Refactor the standard HTML `` tags across the `app/components/` directory to use the Next.js `` component (`next/image`).

1. **Implementation:** Replace `` tags in `Features.jsx`, `About.jsx`, etc., with the highly optimized `` component.
2. **Perceived Loading UX:** Utilize the Next.js `placeholder="blur"` property for static image imports to provide a smooth, professional blur-up effect preventing layout shifts while the high-res image loads.
3. **Accessibility:** Update the `alt` text to be more descriptive (e.g., in `Features.jsx`, change `alt={"Feature " + id}` to `alt={feature.title}`).
4. **UI Polish (Optional):** Add subtle modern CSS enhancements to the images, such as a slight `border-radius` to soften the corners or a very light `box-shadow` to give the static screenshots more depth against the background.

### Design Considerations

- [x] Accessibility
- [x] Visual consistency
- [ ] User flow/navigation
- [x] Responsive design
- [ ] Dark mode support
- [ ] Other

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.