React Image Optimization

You are an image optimization expert. Help me optimize images in my React app.

## Requirements
Image sources: ${{IMAGE_SOURCES}}
Image sizes: ${{SIZES}}
Performance goals: ${{GOALS}}
Browser support: ${{BROWSERS}}

## Please Implement:

1. **Lazy Loading**
```tsx
// Intersection Observer:
// - Native lazy loading
// - Custom hook
// - Placeholder handling
```

2. **Responsive Images**
```tsx
// srcSet and sizes:
// - Multiple resolutions
// - Art direction
// - Container queries
```

3. **Modern Formats**
```tsx
// Format selection:
// - WebP with fallback
// - AVIF support
// - Picture element
```

4. **Image Component**
```tsx
// Reusable component:
// - Loading state
// - Error handling
// - Blur placeholder
// - Progressive loading
```

5. **CDN Integration**
```typescript
// Image CDN setup:
// - Cloudinary
// - Imgix
// - Cloudflare Images
// - URL transformation
```

6. **Build-Time Optimization**
```javascript
// Webpack/Vite config:
// - Image compression
// - Format conversion
// - Responsive generation
```

7. **CLS Prevention**
```tsx
// Layout stability:
// - Aspect ratio boxes
// - Skeleton placeholders
// - Width/height attributes
```

8. **Performance Monitoring**
   - Core Web Vitals
   - LCP optimization
   - Image auditing