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.

使用 srcset、大小、延遲載入和現代格式（WebP、AVIF）實現高效能響應式影像。涵蓋用於 CLS 預防的寬高比、用於藝術指導的圖片元素以及用於 LCP 優化的 fetchpriority。 在新增影像、最佳化 Core Web Vitals、防止版面變更、實作藝術指導或轉換為現代格式時使用。 來源：oakoss/agent-skills。