Responsive Image Optimization

I need to optimize images for my website.

**Current Setup:**
- Framework: [Next.js/React/Vue/static]
- Image CDN: [Cloudinary/imgix/Vercel/none]
- Current implementation: [describe]

**Image Types:**
- Hero images: [sizes needed]
- Content images: [sizes needed]
- Thumbnails: [sizes needed]
- Background images: [requirements]

**Requirements:**
- Formats to support: [WebP/AVIF/JPEG]
- Lazy loading: [native/JS library]
- Placeholder strategy: [blur/solid/skeleton]
- Art direction: [yes/no]

**Performance Goals:**
- LCP target: [X seconds]
- Mobile data consideration: [high/medium/low]

Please provide:
1. Picture element patterns
2. Srcset configurations
3. Lazy loading implementation
4. Placeholder generation
5. CSS for responsive backgrounds
6. Build-time optimization setup
7. CDN configuration recommendations