Add responsive images with srcset for album art

[Akatenvictor]

What

Implement responsive images using srcset and sizes attributes for all album art and profile images to serve appropriately sized images for different viewports.

Why

Serving full-resolution images on mobile wastes bandwidth and slows page loads. Responsive images ensure each device gets an optimally sized image, improving performance and reducing data costs for mobile users.

Scope

In scope:

• Configure image sizes for different breakpoints (thumbnail, small, medium, large)
• Add srcset attribute to album art and profile images
• Add sizes attribute to indicate display sizes
• Generate multiple image sizes at upload time or on-demand
• Fallback to single image for browsers without srcset support

Out of scope:

• WebP/AVIF format conversion
• Image CDN setup
• Image compression at upload
• Lazy loading (separate issue)

Acceptance Criteria

• Album art images have srcset with multiple sizes
• Profile images have srcset with multiple sizes
• sizes attribute matches actual display size
• Mobile devices load smaller images
• Desktop devices load larger images
• No visual quality degradation at any viewport

Technical Context

• Image references in MyAlbums, TopHeader, MerchesContent
• Next.js <Image> component supports srcset natively

[oyeyemipamilerin6-collab]

@oyeyemipamilerin6-collab has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

I’m interested in contributing to this task and can ensure timely delivery with clean implementation

ℹ️ Repo Maintainers: To accept this application, review their application or assign @oyeyemipamilerin6-collab to this issue.

[Tobi-8]

@Tobi-8 has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

please maintainer, i have the experience to solve this issue, be generous and assign me

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Tobi-8 to this issue.

[ada-nwali]

@Ada-Girly881 has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

I'm a full-stack blockchain developer and active open-source contributor interested in tackling this issue. My experience spans smart contract development and frontend/backend integration, which aligns well with Drips' stack.

I've contributed to OSS projects and I'm comfortable navigating unfamiliar codebases, writing clean and tested code, and collaborating through PRs and reviews.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Ada-Girly881 to this issue.

[Queen-T16]

@Queen-T16 has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hello maintainer, i would like to work on this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Queen-T16 to this issue.

[drips-wave]

Congratulations, @Queen-T16! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on July 30, 2026.

🧑‍💻 @Queen-T16: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[drips-wave]

This issue has been completed by @Queen-T16 as part of the Stellar Wave Program's 7th Wave 🥳

😎 @Queen-T16: You earned 200 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.