feat: implement responsive images (#255)

[omonxooo-commits]

Summary

Closes #255

Implements responsive image support to fix oversized images being served to mobile users.

Changes

src/lib/image-optimizer/index.ts

• getOptimizedUrl() — builds CDN-transformed URLs for Cloudinary and Imgix; falls back to original src for Next.js native optimization
• buildSrcSet() — generates a srcset string for a given set of widths
• SIZES — predefined responsive sizes attribute values (full, half, third, avatar)

src/components/ResponsiveImage.tsx

• Wraps next/image (which handles WebP/AVIF automatically via next.config.ts)
• Native lazy loading (loading="lazy") by default; disabled when priority is set
• Optional Cloudinary / Imgix CDN URL building via provider prop
• Graceful fallbackSrc on image load error
• Accessible: enforces alt prop

How to use

// Basic (Next.js native optimization)
<ResponsiveImage src="/hero.jpg" alt="Hero" width={1200} height={600} />

// With predefined sizes
<ResponsiveImage src="/card.jpg" alt="Card" width={400} height={300} responsiveSizes="half" />

// With Cloudinary CDN
<ResponsiveImage
  src="https://example.com/photo.jpg"
  alt="Photo"
  width={800}
  height={600}
  provider="cloudinary"
  optimizerOptions={{ quality: 80 }}
/>

Acceptance Criteria

• Images serve appropriate size for device (via srcset + sizes)
• Lazy loading enabled by default
• WebP/AVIF format support (Next.js image.formats already configured)
• CDN integration (Cloudinary, Imgix)
• No console errors — graceful fallback on broken images

[drips-wave]

@omonxooo-commits Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits