Implement responsive image serving with Content Negotiation headers

[RUKAYAT-CODER]

Background

Serve WebP on supported browsers, PNG on others. Use Accept headers to negotiate image format. Reduces bandwidth by 30-40% on supporting clients.

Description

Serve images in optimal format based on client support (WebP vs PNG).

Current Behavior

Same format served to all clients

Expected Behavior

WebP served to supporting clients, PNG fallback

Impact

📉 Bandwidth reduced 30-40% for modern clients
⚡ Faster image loading
🖼️ Progressive enhancement

Acceptance Criteria

• Configure API to negotiate Accept header
• Serve WebP when supported
• Provide PNG fallback
• Test on various devices
• Verify format negotiation works
• Measure bandwidth reduction
• Document image format strategy

Implementation Hints

Check Accept header in API responses. Ask server for format variants.

Performance Metrics

Before:

• avgImageSize: 250 KB

After (Target):

• avgImageSize: 150 KB (-40%)

Related Issues

• feature: push-notification-system #16
• Implement Mobile Course Viewer #17
• Implement Mobile Settings #24