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 |
| Prevent CLS |
width + height attributes |
Browser reserves space before load |
| Fixed containers |
object-fit: cover or contain |
Maintain aspect ratio in constrained space |
| Format fallback |
AVIF, WebP, JPEG source order |
Best compression first, universal fallback last |
Recommended Image Sizes
| Use Case |
Widths to Generate |
Sizes Attribute |
| Full-width hero |
800w, 1200w, 1600w, 2400w |
100vw |
| Content width |
400w, 800w, 1200w |
(max-width: 768px) 100vw, 800px |
| Grid cards (3-col) |
300w, 600w, 900w |
(max-width: 768px) 100vw, 33vw |
| Sidebar thumbnail |
150w, 300w |
150px |
Loading Strategy
| Image Position |
loading |
fetchpriority |
Why |
| Hero/LCP |
eager |
high |
Optimize LCP, prioritize download |
| Above fold (not LCP) |
eager |
omit |
Load normally |
| Below fold |
lazy |
omit |
Defer until near viewport |
| Off-screen carousel |
lazy |
omit |
Defer until interaction |
Format Comparison
| Format |
Quality |
File Size |
Browser Support |
Use Case |
| JPEG |
Good |
Medium |
100% |
Photos, complex images |
| PNG |
Lossless |
Large |
100% |
Logos, transparency |
| WebP |
Excellent |
Small |
96%+ |
Modern browsers, photos |
| AVIF |
Excellent |
Smallest |
93%+ |
Newest format, fallback required |
Common Mistakes
| Mistake |
Correct Pattern |
| Omitting width and height attributes on img elements |
Always include width and height to prevent CLS layout shift |
| Lazy loading the LCP hero image |
Use loading="eager" and fetchpriority="high" for LCP images |
| Using density descriptors (1x, 2x) for variable-width images |
Use width descriptors (400w, 800w) with a sizes attribute |
| Missing alt text on content images |
Provide descriptive alt text; use alt="" only for decorative images |
| Serving only JPEG without modern format fallbacks |
Use <picture> with AVIF and WebP sources falling back to JPEG |
Delegation
- Audit a page for responsive image issues and CLS problems: Use
Explore agent to scan HTML for missing attributes, incorrect loading strategies, and format gaps
- Convert all images on a page to use picture element with modern formats: Use
Task agent to rewrite img tags with AVIF/WebP/JPEG fallback chain
- Plan an image optimization pipeline for a multi-page site: Use
Plan agent to design srcset breakpoints, format conversion workflow, and CDN integration
References
- srcset, sizes, and width descriptor patterns
- Picture element and art direction
- Modern image formats: WebP, AVIF, and conversion tools
- Lazy loading, fetchpriority, and LCP optimization
- Aspect ratio, object-fit, and CLS prevention
1---2name: responsive-images3description: Implement performant responsive images with srcset, sizes, lazy loading, and modern formats (WebP, AVIF). Covers aspect-ratio for CLS prevention, picture element for art direction, and fetchpriority for LCP optimization. Use when adding images to pages, optimizing Core Web Vitals, preventing layout shift, implementing art direction, or converting to modern formats.4license: MIT5---6
7# Responsive Images
8
9## Overview
10
11Responsive 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.
12
13**When to use:** Any page with images, especially content images, hero images, product photos, and gallery layouts.
14
15**When NOT to use:** Inline SVG icons, CSS background patterns, or canvas-rendered graphics.
16
17## Quick Reference
18
19| Pattern | Approach | Key Points |
20| ----------------- | --------------------------------------------- | -------------------------------------------------- |
21| Responsive sizing | `srcset` with width descriptors (w) + `sizes` | Browser selects optimal image for viewport and DPR |
22| Modern formats | `<picture>` with AVIF, WebP, JPEG sources | AVIF saves 70%, WebP saves 50% vs JPEG |
23| Art direction | `<picture>` with `media` queries | Different crops per viewport |
24| LCP hero image | `loading="eager"` + `fetchpriority="high"` | Prioritize download for Core Web Vitals |
25| Below-fold images | `loading="lazy"` | Defer until near viewport |
26| Prevent CLS | `width` + `height` attributes | Browser reserves space before load |
27| Fixed containers | `object-fit: cover` or `contain` | Maintain aspect ratio in constrained space |
28| Format fallback | AVIF, WebP, JPEG source order | Best compression first, universal fallback last |
29
30## Recommended Image Sizes
31
32| Use Case | Widths to Generate | Sizes Attribute |
33| ------------------ | ------------------------- | --------------------------------- |
34| Full-width hero | 800w, 1200w, 1600w, 2400w | `100vw` |
35| Content width | 400w, 800w, 1200w | `(max-width: 768px) 100vw, 800px` |
36| Grid cards (3-col) | 300w, 600w, 900w | `(max-width: 768px) 100vw, 33vw` |
37| Sidebar thumbnail | 150w, 300w | `150px` |
38
39## Loading Strategy
40
41| Image Position | loading | fetchpriority | Why |
42| -------------------- | ------- | ------------- | --------------------------------- |
43| Hero/LCP | `eager` | `high` | Optimize LCP, prioritize download |
44| Above fold (not LCP) | `eager` | omit | Load normally |
45| Below fold | `lazy` | omit | Defer until near viewport |
46| Off-screen carousel | `lazy` | omit | Defer until interaction |
47
48## Format Comparison
49
50| Format | Quality | File Size | Browser Support | Use Case |
51| ------ | --------- | --------- | --------------- | -------------------------------- |
52| JPEG | Good | Medium | 100% | Photos, complex images |
53| PNG | Lossless | Large | 100% | Logos, transparency |
54| WebP | Excellent | Small | 96%+ | Modern browsers, photos |
55| AVIF | Excellent | Smallest | 93%+ | Newest format, fallback required |
56
57## Common Mistakes
58
59| Mistake | Correct Pattern |
60| ------------------------------------------------------------ | --------------------------------------------------------------------- |
61| Omitting width and height attributes on img elements | Always include `width` and `height` to prevent CLS layout shift |
62| Lazy loading the LCP hero image | Use `loading="eager"` and `fetchpriority="high"` for LCP images |
63| Using density descriptors (1x, 2x) for variable-width images | Use width descriptors (400w, 800w) with a `sizes` attribute |
64| Missing alt text on content images | Provide descriptive alt text; use `alt=""` only for decorative images |
65| Serving only JPEG without modern format fallbacks | Use `<picture>` with AVIF and WebP sources falling back to JPEG |
66
67## Delegation
68
69- **Audit a page for responsive image issues and CLS problems**: Use `Explore` agent to scan HTML for missing attributes, incorrect loading strategies, and format gaps
70- **Convert all images on a page to use picture element with modern formats**: Use `Task` agent to rewrite img tags with AVIF/WebP/JPEG fallback chain
71- **Plan an image optimization pipeline for a multi-page site**: Use `Plan` agent to design srcset breakpoints, format conversion workflow, and CDN integration
72
73## References
74
75- [srcset, sizes, and width descriptor patterns](references/srcset-sizes.md)
76- [Picture element and art direction](references/picture-element.md)
77- [Modern image formats: WebP, AVIF, and conversion tools](references/modern-formats.md)
78- [Lazy loading, fetchpriority, and LCP optimization](references/lazy-loading.md)
79- [Aspect ratio, object-fit, and CLS prevention](references/aspect-ratio.md)
oakoss