Skip to content

fix: enable next/image optimization in ProfileCard (#2546) - #3265

Open
aaniya22 wants to merge 2 commits into
Priyanshu-byte-coder:mainfrom
aaniya22:feature/2546-optimize-images-profilecard
Open

fix: enable next/image optimization in ProfileCard (#2546)#3265
aaniya22 wants to merge 2 commits into
Priyanshu-byte-coder:mainfrom
aaniya22:feature/2546-optimize-images-profilecard

Conversation

@aaniya22

Copy link
Copy Markdown
Contributor

Summary

Removed the unoptimized flag from ProfileCard's avatar <Image> so Next.js can actually optimize it, and allowlisted images.unsplash.com (the fallback avatar source) in next.config.mjs for both image remotePatterns and the CSP img-src directive.

Closes #2546


Type of Change

  • ⚡ Performance improvement

What Changed

  • Removed unoptimized prop from the <Image> component in src/components/ProfileCard.tsx
  • Added images.unsplash.com to images.remotePatterns in next.config.mjs
  • Added https://images.unsplash.com to the CSP img-src directive in next.config.mjs

How to Test

  1. Render a ProfileCard without passing an avatarUrl prop (so it falls back to the Unsplash placeholder)
  2. Confirm the avatar loads correctly and check Network tab — the image should be served through /_next/image rather than the raw Unsplash URL
  3. Run npx vitest run test/components/ProfileCard.test.tsx

Expected result: Avatar renders correctly, image requests are optimized via Next.js image pipeline, no CSP violations in console, all 4 existing tests pass.


Checklist

  • Linked the related issue above
  • Self-reviewed my own diff
  • No unnecessary console.log, debug code, or commented-out blocks
  • npm run lint passes locally
  • No TypeScript errors (npm run type-check)
  • Added or updated tests where applicable
  • Updated documentation / comments if behavior changed

Accessibility (UI changes only)

N/A — no UI/markup change, only image optimization behavior.


Additional Context

None.

…der#2546)

Removed unoptimized flag and allowlisted images.unsplash.com in
remotePatterns and CSP img-src for the fallback avatar.

Signed-off-by: aaniya22 <aaniyaatomar@gmail.com>
@github-actions github-actions Bot added type:bug GSSoC type bonus: bug fix type:feature GSSoC type bonus: new feature type:design GSSoC type bonus: UI/design (+10 pts) type:performance GSSoC type bonus: performance (+15 pts) gssoc26 GSSoC 2026 contribution labels Jul 28, 2026
@github-actions

Copy link
Copy Markdown

GSSoC Label Checklist 🏷️

@Priyanshu-byte-coder — please apply the appropriate labels before merging:

Difficulty (pick one):

  • level:beginner — 20 pts
  • level:intermediate — 35 pts
  • level:advanced — 55 pts
  • level:critical — 80 pts

Quality (optional):

  • quality:clean — ×1.2 multiplier
  • quality:exceptional — ×1.5 multiplier

Validation (required to score):

  • gssoc:approved — counts for points
  • gssoc:invalid / gssoc:spam / gssoc:ai-slop — does not score

Type labels (type:*) are auto-detected from files and title. Review and adjust if needed.
Points formula: (difficulty × quality_multiplier) + type_bonus

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

gssoc26 GSSoC 2026 contribution type:bug GSSoC type bonus: bug fix type:design GSSoC type bonus: UI/design (+10 pts) type:feature GSSoC type bonus: new feature type:performance GSSoC type bonus: performance (+15 pts)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Optimize images using next/image in ProfileCard

1 participant