responsive-images
Responsive Images
Overview
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.
Quick Reference
| Pattern | Approach | Key Points |
|---|---|---|
| Responsive sizing | srcset with width descriptors (w) + sizes |
Browser selects optimal image for viewport and DPR |
| Modern formats | <picture> with AVIF, WebP, JPEG sources |
AVIF saves 70%, WebP saves 50% vs JPEG |
| Art direction | <picture> with media queries |
Different crops per viewport |
| LCP hero image | loading="eager" + fetchpriority="high" |
Prioritize download for Core Web Vitals |
| Below-fold images | loading="lazy" |
Defer until near viewport |
More from oakoss/agent-skills
playwright
|
200ui-ux-polish
Iterative UI/UX polishing workflow for web applications. Use when improving visual polish, refining desktop and mobile UX separately, running iterative enhancement cycles, applying design patterns like glassmorphism or bento grids, or auditing accessibility and WCAG compliance. Use for Stripe-level visual quality, responsive optimization, and design system alignment.
153find-skills
|
119knowledge-graph-builder
>
101tailwind
Tailwind CSS v4 patterns and design systems. Use when configuring Tailwind themes, building components, implementing dark mode, using container queries, migrating from v3, integrating shadcn/ui, or fixing build errors. Use for tailwind, css, styling, theme, design-tokens.
85pnpm-workspace
pnpm workspace monorepo management with filtering, catalogs, and shared configs. Use when setting up monorepos, managing workspace dependencies, filtering package commands, or sharing configuration across packages.
78