Responsive Images with srcset — Explained Properly

srcset supplies candidate files; sizes describes the image’s layout slot. It does not replace CSS or force one exact file choice. The browser can also consider density, cache and loading conditions.

Prepare two files you can check

Download the 800 × 600 chart. Open it in Resize Image, keep the aspect ratio and change width to 400: the expected height is 300. Apply and download the copy without overwriting the source. Check both files’ dimensions.

For a test page, save the copies as sample-400.png and sample-800.png beside the HTML. This example assumes a slot that occupies the viewport minus 32 pixels up to a maximum of 800 pixels; update CSS and sizes together if your layout differs:

<img src="sample-800.png"
     srcset="sample-400.png 400w, sample-800.png 800w"
     sizes="(max-width: 832px) calc(100vw - 32px), 800px"
     style="width: min(800px, calc(100vw - 32px)); height: auto"
     width="800" height="600" alt="Synthetic colour and edge chart">

The 400w and 800w numbers are actual file widths, not breakpoints. Inspect document.querySelector('img').currentSrc and the Network panel at different viewports and densities. Use a fresh context or control caching: narrowing the window does not guarantee replacement of a larger image already downloaded.

Pick appropriate descriptors

Width descriptors work with sizes; 1x and 2x describe density and are useful for a fixed display size. Do not mix the two types within one srcset. Inaccurate sizes can lead to a poor selection; leaving it out does not always select the largest file.

picture with type selects formats; srcset can offer size variants within each. You do not need every possible combination: start with sizes used by your layout and measure. MDN’s HTML reference explains the attributes.

Verify the visible result

Check sharpness and downloaded bytes on mobile and desktop. Reserve the aspect ratio with correct dimensions to prevent shifts. If the image is the LCP element, avoid delaying its request with lazy loading; see the diagnostic workflow. Having variants alone does not demonstrate a better performance score.