responsive-images

Responsive images serve the right image size and format based on viewport, device pixel ratio, and browser capabilities. Proper implementation prevents layout shift (CLS), optimizes Largest Contentful Paint (LCP), and reduces bandwidth by 50-70% with modern formats.

When to use: Any page with images, especially content images, hero images, product photos, and gallery layouts.

When NOT to use: Inline SVG icons, CSS background patterns, or canvas-rendered graphics.

Implémentez des images réactives performantes avec srcset, tailles, chargement paresseux et formats modernes (WebP, AVIF). Couvre le rapport hauteur/largeur pour la prévention CLS, l'élément d'image pour la direction artistique et la priorité d'extraction pour l'optimisation LCP. À utiliser lors de l'ajout d'images aux pages, de l'optimisation de Core Web Vitals, de la prévention des changements de mise en page, de la mise en œuvre de la direction artistique ou de la conversion vers des formats modernes. Source : oakoss/agent-skills.