Responsive images allow a browser to choose an appropriate file instead of making every visitor download the largest available image. They improve efficiency without requiring separate page designs.
Use srcset for width choices
A srcset can list several versions of the same image with their intrinsic widths, such as 480w, 800w and 1280w. The browser combines that information with the sizes attribute, viewport and device pixel density to choose a candidate.
The sizes value should describe the image display width in the layout, not the source file width. Inaccurate sizes can cause the browser to choose a file that is larger or smaller than needed.
Use picture for formats or different crops
The picture element can offer WebP or other formats before a fallback image. It can also provide a different composition for a narrow screen, such as a tighter portrait crop instead of squeezing a wide hero into a small viewport.
Keep an img element inside picture as the fallback and as the element that provides alt text, dimensions and loading behavior.
Do not generate dozens of arbitrary widths
Choose a manageable set of breakpoints based on actual layout sizes and likely device densities. Too many near-identical variants increase build complexity and storage without meaningful savings.
Example planning process
- Identify the image width at each major layout breakpoint.
- Create roughly 1× and 2× variants where useful.
- Compress each variant independently.
- Test the selected candidate in browser developer tools on several viewport sizes.
This guide was reviewed for practical clarity and updated for the current NEXDOWNLOAD toolset on July 28, 2026.