Measure the rendered slot and device pixel ratio, verify truthful candidate widths and sizes hints, then inspect currentSrc and successful loading under controlled conditions.
A thumbnail can be 350 CSS pixels wide and still download a much larger image. That is not automatically a bug: a high-density screen may need more image pixels than the layout width suggests. The problem begins when the browser receives an inaccurate description of the layout, misleading candidate widths or unsuitable files.
Start with one image and one repeatable viewport. Measure its rendered space, inspect the selected resource and check whether it loaded correctly. Compressing every file or deleting responsive attributes before that investigation can make other screen sizes worse.
Distinguish the slot from the source file
The slot is the image’s displayed space in the layout. Its width depends on CSS, container width, padding and the current breakpoint. The source file has its own intrinsic pixel dimensions. Device pixel ratio connects these concepts, but the values are not interchangeable.
Imagine a fictional guide card with a 360 CSS-pixel slot on a device using a pixel ratio of two. A source near 720 pixels wide could supply the corresponding detail. That calculation is a useful expectation, not a command forcing the browser to choose a particular file. Available candidates and browser decisions still matter.
Record the viewport, device pixel ratio and measured slot before judging the download. A desktop browser narrowed to a phone-shaped window does not necessarily reproduce a phone’s pixel ratio. Likewise, viewing a file directly says little about the card layout that selected it.
Understand what srcset and sizes describe
MDN’s responsive-image guide explains width descriptors such as 480w and density descriptors such as 2x. Width descriptors must reflect the actual candidate file widths. Do not label a 1,200-pixel file as 480w to persuade the browser to download it sooner.
With width candidates, sizes supplies an expected source size in CSS terms for the relevant conditions. It does not set the element’s layout width. If the stylesheet creates a narrow card while sizes describes the entire viewport, the browser is being given the wrong estimate.
Use one descriptor approach within a srcset rather than mixing width and density descriptors in that list. Fixed-size icons and flexible editorial images can need different approaches. The implementation should describe the image’s real use, not follow a copied attribute string whose layout assumptions no longer apply.
Build a truthful single-column example
The following invented example has a container 32 pixels narrower than the viewport, capped at 720 pixels. Each file must actually exist, have the declared width and share the intended composition. The names are illustrative; adding this markup does not generate image variants.
.guide-visual {
width: calc(100% - 32px);
max-width: 720px;
margin-inline: auto;
}
.guide-visual img {
display: block;
width: 100%;
height: auto;
}<div class="guide-visual">
<img
src="diagram-960.jpg"
srcset="diagram-480.jpg 480w,
diagram-960.jpg 960w,
diagram-1440.jpg 1440w"
sizes="(max-width: 752px) calc(100vw - 32px), 720px"
width="1440" height="960"
alt="A request passing through an edge cache to the server">
</div>At a 390-pixel viewport, this design expects a 358-pixel slot. Compare that expectation with the measured element. If a sidebar, page wrapper or nested padding changes the real width, revise the model. For a multi-column grid, write source-size conditions that describe the grid’s actual slots rather than reusing this single-column example.
Inspect the image the browser selected
Select the real img element in the browser’s Elements panel. Compare its rendered width, src, srcset and sizes with the Network entry. The currentSrc property reports the selected URL, including the candidate chosen through responsive markup.
For a harmless local diagnostic, inspect these properties on the selected image. The expression below reads the selected element; it changes no page data.
({
selectedURL: $0.currentSrc,
renderedWidth: $0.getBoundingClientRect().width,
devicePixelRatio: window.devicePixelRatio,
complete: $0.complete,
naturalWidth: $0.naturalWidth
})This assumes $0 is the img element in developer tools that support that convention. currentSrc is not proof that the file successfully loaded. Check the actual response, decoded appearance and useful intrinsic dimensions as well. Complete alone is insufficient, because a finished failure is also a completed loading attempt.
Use a controlled test matrix
The HTML standard leaves selection discretion to browsers. Factors beyond viewport width can influence the choice. A larger previously loaded candidate can also remain useful after narrowing the window, so a simple resize is a weak way to prove the first-load selection.
| Condition | Record | Question |
|---|---|---|
| Narrow viewport, fresh test session | Slot width, ratio, selected URL and response | Does the initial mobile layout get a plausible resource? |
| Wide viewport, same controlled ratio | The same fields and visual detail | Does the larger slot have enough detail? |
| Higher pixel ratio | Candidate change and visible quality | Are suitable higher-resolution variants available? |
| Returning visit or resized window | Cached resource and currentSrc | Is reuse being mistaken for a fresh selection problem? |
Use a fresh isolated session or the browser’s documented cache controls for an initial-load comparison. Keep those conditions in the test note. Do not demand an exact candidate URL merely because a spreadsheet calculation suggests it; investigate a clearly excessive transfer or visibly inadequate detail using the full evidence.
Separate resolution switching from art direction
Resolution switching offers different detail levels for broadly the same composition. Art direction changes the composition itself, such as a close crop that keeps a person visible on a narrow card. A higher-resolution file cannot fix a crop that removes the subject.
The picture element allows source choices using media conditions or formats. It still needs an img element, which provides the displayed image and its alternative text. Order source conditions deliberately, retain a suitable fallback and verify the actual selected crop at each breakpoint.
When a container uses object-fit: cover, part of the image can be cropped even if the source is correct. Check object position and the subject’s safe area. For a logo or information-bearing diagram, cropping important content is usually unsuitable; choose a composition and fitting mode that preserve what the reader needs.
Trace generated markup back to its owner
In a CMS, the saved original, generated variants, block settings, theme markup and image CDN can each affect delivery. Inspect the public HTML rather than assuming the editor preview has identical attributes. Locate the component that produced a wrong sizes value and repair it there, so the next edit does not overwrite a manual patch.
Check that advertised candidate URLs return real images rather than an HTML error page. Also verify whether a transformation endpoint returns the requested dimensions. Our WordPress image-sizing workflow covers the upload and generated-size stage; this guide addresses selection after those files exist.
When changing a reusable image component, include several representative assets: a photograph with a subject near an edge, an illustration containing labels and a simple decorative image. Open each in its actual card and article use. A repair that looks good for one landscape photo can still crop essential labels or select an excessive file in a narrower related-guide card. Keep the component settings tied to those distinct layout uses rather than assigning every image the hero’s source-size hint.
Accept the result only after checking meaning and layout
Confirm readable detail, the intended crop, accurate candidate widths and a source-size model matching the layout. Check that the image reserves appropriate space and has alternative text suited to its purpose. Then inspect transfer size and the selected URL under the recorded narrow, wide and density conditions.
Keep LCP prioritisation as a separate question for a confirmed largest element, covered in our LCP diagnosis guide. Responsive selection gives the browser useful options; it does not guarantee a faster page, a particular score or higher search rankings.
Sources and verification
Editorial review 2026-10-14. Source check dates are recorded separately. Notes describe what each source supports and its limits.
View sources
- MDN: Using responsive images in HTMLChecked Resolution switching, width and density descriptors, source-size hints and the distinction from art direction.
Limits: Examples do not guarantee which candidate a browser will choose under every device and network condition. - WHATWG: HTML imagesChecked Responsive image selection model, candidate descriptors and browser selection discretion.
Limits: The standard is not a performance measurement of a particular website. - MDN: HTMLImageElement currentSrcChecked currentSrc reports the selected source URL and does not establish successful image loading.
Limits: A selected URL alone does not show decoded appearance, transfer size or correct crop. - MDN: picture elementChecked Source selection for media conditions and formats, with an img element providing the displayed image and alternative text.
Limits: Correct markup does not guarantee that every supplied crop or file is suitable.