Responsive Images Skill

This skill covers modern responsive image techniques: resolution switching with srcset and sizes, art direction with <picture>, and modern format support with graceful fallbacks.

Philosophy

Images should:

1. Serve optimal files - Right size for the display context
2. Use modern formats - AVIF, WebP with JPEG/PNG fallback
3. Prioritize correctly - LCP images load first, others lazy load
4. Work everywhere - Fallbacks for older browsers

The Image Loading Attributes

Every image should have appropriate loading attributes: