Responsive and Adaptive Images
Responsive images prevent mobile devices from downloading desktop-sized images. WordPress already generates multiple sizes and emits srcset/sizes for most images. Your job is to validate it's working for your templates and not being broken by builders, custom markup, or a CDN setup.
Responsive vs Adaptive
| Approach | Where the Choice Happens | Typical Tooling |
|---|---|---|
| Responsive images | Browser chooses from srcset | WordPress core + theme markup |
| Adaptive images | Server/CDN chooses based on device/network | Cloudflare/Bunny/etc. |
WordPress Default Behavior
When you upload an image, WordPress generates multiple sizes and typically emits:
srcset(available widths)sizes(how wide the image will render)
CLS Safety
Always reserve space:
responsive-image-with-dimensions.html
<img
src="/uploads/hero-1200.webp"
srcset="/uploads/hero-640.webp 640w, /uploads/hero-1200.webp 1200w"
sizes="(max-width: 640px) 640px, 1200px"
width="1200"
height="630"
alt="Hero"
/>
Validation (DevTools)
- DevTools -> Network, reload with cache disabled.
- Click the hero/product image request.
- Confirm the downloaded image width matches the viewport.
- Test on a mobile viewport emulation and confirm a smaller file is chosen.