Responsive Images
Serve right-sized images per device so a phone never downloads a full desktop image.
Metrics
This technique can move up to 100% of LCP's share of the Lighthouse score.
This technique does not move TBT.
This technique can move up to 33% of CLS's share of the Lighthouse score.
This technique can move up to 67% of FCP's share of the Lighthouse score.
This technique can move up to 67% of SI's share of the Lighthouse score.
This technique does not move TTFB.
Overview
A 1200 × 630 desktop image served to a 390 px mobile screen transfers 4–6× more bytes than necessary. The srcset and sizes attributes let the browser select the optimal image size for the actual viewport and pixel density — eliminating wasted bandwidth that directly delays LCP on mobile.
Impact grade, A+ to D: how much of the Lighthouse score this technique can move. Unaffected: TBT, TTFB.
The Problem
Most WordPress themes generate responsive image markup automatically, but the sizes attribute defaults to 100vw — which tells the browser to download the full-viewport-width image on every device. On a 390 px screen with a Retina display, the browser requests a 780 px image. If the image sits inside a 600 px container, a 1200 px source is still served — twice the bytes needed.
Performance Impact
LCP
300–900ms
on mobile networks where bandwidth is the bottleneck
CLS
0.05–0.20
correct aspect ratios prevent layout reflow on load
FCP
correctly-sized image for the device downloads faster; paint begins sooner without waiting for an oversized file to transfer
SI
200–700ms
smaller images composited onto screen sooner
Risk: Low
browser picks correct size — no visual difference
How it works
01
Generate multiple image sizes
WordPress automatically creates several size variants on upload (thumbnail, medium, large, full). For custom themes, register additional sizes with
add_image_size()to fill gaps in the srcset range.02
Set accurate sizes attributes
The
sizesattribute tells the browser the rendered width at each breakpoint before layout runs. For a card grid that is 33 % wide on desktop and full-width on mobile:sizes="(max-width: 768px) 100vw, 33vw".03
Use width and height attributes
Setting both
widthandheighton every<img>lets the browser reserve space before the image loads, eliminating CLS. WordPress adds these automatically since version 5.5.04
Verify with Chrome DevTools
In Network → Images, compare the natural size of each loaded image against its rendered size. A ratio above 2× signals an oversized source. Lighthouse also reports this under ‘Properly size images’.
Limitations
- Accurate sizes values require knowledge of the CSS layout at each breakpoint — wrong values cause the browser to download the wrong size.
- Generating many size variants increases upload processing time and storage requirements.
- Third-party page builders that output inline background images instead of elements cannot use srcset.
Common Mistakes
Leaving sizes as the default 100vw for all images
100vw is correct only for full-width images. Content images in sidebars, cards, or multi-column grids need sizes that reflect the actual rendered width at each breakpoint.
Adding srcset but omitting width and height attributes
Without explicit dimensions the browser cannot calculate aspect ratio before the image loads, causing layout shifts. Always add both width and height even when the image is fluid via CSS.
Need help applying this to your site?
Targeted fixes, not guesswork. We identify which techniques move the needle for your specific WordPress stack.
Start an Engagement