feat(perf): optimize image loading with WebP conversion and next/imag…

[Wilfred007]

Summary

• Converted all raster assets (avatar.png, example.png) to WebP, reducing total image payload by ~94% (124 KB → 7 KB combined)
• Configured Next.js to negotiate AVIF/WebP delivery via Accept headers for all components
• Added proper sizes and priority props to usages to eliminate oversized srcset downloads and prevent LCP layout shift
• Added sharp as a devDependency and a reusable scripts/convert-to-webp.js script for future asset onboarding

Changes

┌─────────────────────────────────────────┬────────────────────────────────────────────────────────────────────────┐
│ File │ What changed │
├─────────────────────────────────────────┼────────────────────────────────────────────────────────────────────────┤
│ assets/avatar.webp │ WebP replacement for avatar.png (1.5 KB → 940 B, −40%) │
├─────────────────────────────────────────┼────────────────────────────────────────────────────────────────────────┤
│ assets/example.webp │ WebP replacement for example.png (123 KB → 6.1 KB, −95%) │
├─────────────────────────────────────────┼────────────────────────────────────────────────────────────────────────┤
│ next.config.js │ Added images.formats, deviceSizes, and imageSizes config │
├─────────────────────────────────────────┼────────────────────────────────────────────────────────────────────────┤
│ components/organisms/campaign/index.tsx │ Imports WebP assets; added sizes + priority to hero image │
├─────────────────────────────────────────┼────────────────────────────────────────────────────────────────────────┤
│ components/atoms/author-info/index.tsx │ Added sizes="36px" to fixed-size avatar │
├─────────────────────────────────────────┼────────────────────────────────────────────────────────────────────────┤
│ scripts/convert-to-webp.js │ Reusable conversion script — run npm run convert:assets for new images │
├─────────────────────────────────────────┼────────────────────────────────────────────────────────────────────────┤
│ package.json │ Added sharp devDependency and convert:assets script │
└─────────────────────────────────────────┴────────────────────────────────────────────────────────────────────────┘

Why priority on the campaign image?

The campaign image is above the fold and was being lazy-loaded, which blocked LCP. Marking it priority injects a in the document head so the browser fetches it immediately.

Test plan

• npm run lint — no warnings or errors
• npm run typecheck — no TypeScript errors
• npm run build — production build completes successfully (all 30 pages generated)
• WebP assets verified on disk and imported correctly by components

Dependencies introduced

┌─────────┬─────────┬────────────────────────────────────────────────────────────────────┐
│ Package │ Version │ Role │
├─────────┼─────────┼────────────────────────────────────────────────────────────────────┤
│ sharp │ ^0.35.2 │ devDependency — WebP/AVIF conversion in scripts/convert-to-webp.js │
└─────────┴─────────┴────────────────────────────────────────────────────────────────────┘

Closes #7

[vercel]

@Akatenvictor is attempting to deploy a commit to the Meshack Yaro 's projects Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
trustflow-frontend	Ready	Preview, Comment	Jun 29, 2026 4:50pm

[meshackyaro]

Well done and thanks for contributing to this project