perf: add lazy loading and dynamic alt text to ImageCard

[Dotify71]

Description

This PR addresses two performance and accessibility issues in the ImageCard component of the frontend gallery (frontend/src/components/Media/ImageCard.tsx):

1. Lazy Loading: Adds loading="lazy" to the main <img /> tag inside ImageCard to defer the loading of off-screen media. This prevents the browser from aggressively downloading all image files on mounting large grids, significantly saving initial network bandwidth and memory overhead.
2. Dynamic Alt Text: Replaces the hardcoded 'Sample Title' alt text with a dynamic value using the image metadata name (image.metadata?.name), falling back to the filename extracted from its path (image.path), and defaulting to 'Image'.

Closes #1326

Summary by CodeRabbit

• Bug Fixes
  • Improved image accessibility by using dynamic alternative text based on image metadata and filename, providing better descriptions for screen readers.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 6a4636c8-8b76-4df8-828c-632b4c306a2b

📥 Commits

Reviewing files that changed from the base of the PR and between b3eee2c and 63f7060.

📒 Files selected for processing (1)

• frontend/src/components/Media/ImageCard.tsx

---

Walkthrough

The <img> element in ImageCard.tsx has its alt attribute changed from the hardcoded string 'Sample Title' to a computed fallback chain: image.metadata?.name, then the basename extracted from image.path, then 'Image' as a final default.

Changes

Dynamic alt text in ImageCard

Layer / File(s)	Summary
Computed alt attribute fallback chain frontend/src/components/Media/ImageCard.tsx	alt attribute changed from static 'Sample Title' to a three-level fallback: image.metadata?.name → basename of image.path → 'Image'.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Suggested labels

TypeScript/JavaScript

Poem

🐇 No more "Sample Title" on every frame,
Each picture now carries its own little name.
From metadata first, then the path gives a clue,
And if all else fails, "Image" will do!
Accessibility hops forward, hurray! 🎉

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately reflects the main changes: adding lazy loading and dynamic alt text to ImageCard component.
Linked Issues check	✅ Passed	The PR implements both requirements from #1326: lazy loading attribute and dynamic alt text with proper fallbacks.
Out of Scope Changes check	✅ Passed	All changes in the PR are directly aligned with the objectives stated in #1326; no out-of-scope modifications detected.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}