The name makes responsive images sound like a CSS topic, but the real question is which file gets downloaded. Setting the width to 100% in CSS does nothing if the browser has already pulled down the large file — the data is spent.
Letting the browser choose
The answer is not for the server to decide and send, but to let the browser choose. Only the browser knows the viewport width, the pixel density and the layout as it currently stands.
The mechanism has two halves. srcset lists the candidate files and the real pixel width of each. sizes declares how wide the image will be on screen. The browser compares the two and requests exactly one file.
Wrong sizes makes srcset pointless
Here is the common misunderstanding. However well you prepare the candidates, if you declare “this image fills the viewport”, the browser will pick a viewport-width candidate even for a small sidebar thumbnail. It does not read your layout and infer — it believes what sizes says.
So sizes is a value that has to be maintained alongside the layout. Redesign a card grid from three columns to two and this value changes with it. Since the designer is the person who sets the breakpoints, this is genuinely part of the design decision.
What WordPress does and does not do
The good news is that WordPress adds these attributes automatically for images inserted into content. The sizes you tidied in the previous part are precisely the candidate list — which is where that cleanup pays off.
There are places it cannot help. A CSS background image does not participate in this mechanism at all, which is the classic reason a hero placed as a background sends the desktop file to phones as well. Any image that carries meaning on screen is better as a real image element than a background, for accessibility and performance alike.
More on how the selection works sits in the performance archive, and auditing these values template by template is part of our optimization program.
Next part
Which file is settled; when comes next. Lazy loading is right for almost every image — but there is exactly one that must be treated the other way round.