Use next/image for images in quality-prs-list.tsx

[geetxnshgoyal]

Problem

components/quality-prs-list.tsx renders images with a plain <img>:

• line 232: PR author avatars (src={pr.author.avatar})

Plain <img> skips Next.js's resizing, modern formats and lazy-loading, so these avatars download at full size. ESLint flags it (@next/next/no-img-element).

Check it on /quality-prs.

Done when

• Every <img> listed above is a next/image <Image> with explicit width/height (or fill inside a sized, relative parent).
• Remote hosts are already allowed in next.config.ts (github.com, avatars.githubusercontent.com, images.unsplash.com). If you hit a different host, add it there and say so in the PR.
• The page looks the same as before: same size, crop, rounding and hover effects. Add before/after screenshots to the PR.
• npx eslint components/quality-prs-list.tsx shows no @next/next/no-img-element.
• npm run build passes.

Size: ~5–15 lines.

---

Taking this? Comment /assign and the bot assigns you if it's free. One issue per person at a time; comment /unassign to hand it back. That's milestone 2 of the 10 PR Journey. Setup, the checks CI runs, and how to open the PR from your fork are in CONTRIBUTING.md. Put Fixes #<this issue> in your PR description.