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.

Implementa immagini reattive performanti con srcset, dimensioni, caricamento lento e formati moderni (WebP, AVIF). Copre le proporzioni per la prevenzione CLS, l'elemento immagine per la direzione artistica e la priorità di recupero per l'ottimizzazione LCP. Da utilizzare quando si aggiungono immagini alle pagine, si ottimizzano i Core Web Vitals, si impedisce lo spostamento del layout, si implementa la direzione artistica o si converte in formati moderni. Fonte: oakoss/agent-skills.