Responsive Image and Media Strategy

You are a front-end performance specialist who has reduced page load times by 60%+ through responsive image and media optimization strategies.

Site type: [E-COMMERCE/BLOG/PORTFOLIO/SAAS/NEWS/SOCIAL]
Current image issues: [SLOW LOAD/WRONG SIZES/POOR QUALITY/NO STRATEGY]
CDN: [CLOUDFLARE/CLOUDINARY/IMGIX/AWS CLOUDFRONT/NONE]
Framework: [NEXT.JS/GATSBY/NUXT/PLAIN HTML/WORDPRESS/SHOPIFY]
Target performance: [CORE WEB VITALS PASSING/TOP 10% LIGHTHOUSE/BEST POSSIBLE]

Create a complete responsive media strategy:

**1. Image Size Matrix**
For each image use case (hero, card thumbnail, avatar, etc.):
- Display sizes at each breakpoint (mobile, tablet, desktop, retina)
- Source sizes attribute value
- Srcset widths to generate (e.g., 320w, 640w, 960w, 1280w, 1920w)
- Maximum file size budget per image
- Format priority: AVIF > WebP > JPEG (with fallback chain)

**2. Art Direction Strategy**
- Which images need different crops at different breakpoints
- Picture element with media queries for art-directed images
- Focal point preservation across crops
- Aspect ratio changes per breakpoint (e.g., 16:9 desktop, 1:1 mobile)

**3. Lazy Loading Implementation**
- Above-the-fold images: eager loading (no lazy)
- Below-fold images: native lazy loading (loading="lazy")
- Intersection Observer configuration for custom behavior
- Placeholder strategy: blur-up, dominant color, LQIP, skeleton
- Loading threshold (how far before viewport to start loading)

**4. Video and Animation Strategy**
- Autoplay video: muted, playsinline, preload="metadata"
- Poster image for video elements
- Responsive video sources (different quality per connection)
- GIF replacement with video (MP4/WebM)
- Animation: CSS vs Lottie vs video decision tree
- Reduced motion: respect prefers-reduced-motion

**5. Image Optimization Pipeline**
- Build-time optimization: sharp, imagemin configuration
- Runtime optimization: CDN transformation URLs
- Quality settings per format (AVIF: 60, WebP: 75, JPEG: 80)
- Resize on upload vs on-demand resizing
- Metadata stripping (EXIF, color profile handling)

**6. Performance Metrics**
- LCP (Largest Contentful Paint): target under 2.5s
- CLS (Cumulative Layout Shift): target under 0.1
  - Width and height attributes on all images
  - Aspect-ratio CSS for responsive images
- Image decode time optimization
- Total image weight budget per page type

**7. Accessibility**
- Alt text strategy (descriptive, functional, decorative)
- Figure and figcaption usage
- Image text alternatives for infographics
- High contrast mode image handling
- Dark mode image adaptation

**8. Implementation Code Snippets**
- HTML: picture element with srcset and sizes
- CSS: responsive background images with image-set()
- Next.js: Image component configuration
- WordPress: responsive image filter
- Shopify: image_url with size parameter

Provide exact srcset values, sizes attributes, and quality settings for every image type. Include before/after file size comparisons.