Detailed answer
Srcset supplies candidate resources.
With width descriptors, sizes describes the expected rendered width so the browser can make an informed choice. Include src as a fallback and useful alt text. Different resolutions should represent the same image; picture is useful when the composition itself must change.
Example
<img src="card-640.jpg" srcset="card-640.jpg 640w, card-1280.jpg 1280w" sizes="(max-width:640px) 100vw, 640px" alt="An HTML editor">
Understanding the behavior
Width descriptors describe source image widths; sizes describes the expected rendered slot at different viewport conditions. The browser combines those hints with factors such as pixel density. Incorrect sizes can cause unnecessarily large downloads even when the page looks correct.
Practical implementation notes
Inspect the image's currentSrc and network transfer at several viewport sizes. Browser caching can affect what you observe, so do not expect changing the window width to always trigger a smaller replacement download.
How to check it
Compare the image's currentSrc and request after testing different viewport widths and pixel densities.
Expected result
The browser can select among candidates; selection is not determined by width alone.
Watch out: Inaccurate sizes can cause unnecessarily large downloads.
Read the reference ↗