Set up responsive image width candidates

Use each srcset width descriptor for the image file’s actual pixel width, and use sizes to describe the space the image is expected to occupy in the page layout. The browser can then choose among the width candidates using that information. MDN’s <img> reference documents srcset, sizes, and the width and height attributes.

First, list the image files you intend to offer and inspect each file’s pixel dimensions. A file that is 640 pixels wide gets a 640w descriptor; a 1,280-pixel-wide file gets 1280w. The descriptor describes the file, not the width at which it happens to appear on one screen. Keep a usable image in src as well.

Next, write the sizes hint from the layout. If the image fills the available width in a narrow layout and occupies a smaller fixed space in a wider layout, the hint should reflect those two cases. Review the page layout before assigning values. Copying a sizes string from another image can give the browser inaccurate information when the two images occupy different spaces.

For example, if you have matching 640-pixel and 1,280-pixel files and the page slot is full width below 700 pixels but 640 pixels wide above that, the markup could be:

<img src="/images/pattern-640.png"
     srcset="/images/pattern-640.png 640w, /images/pattern-1280.png 1280w"
     sizes="(max-width: 700px) 100vw, 640px"
     width="640" height="400" alt="">

These are illustrative filenames and widths for a decorative pattern, hence the empty alt value. Measure your own files, replace the slot rule with the layout the page actually uses, and write meaningful alt text if your image conveys content.

Treat the width and height attributes as a separate check. They describe the image’s dimensions and help the page reserve the appropriate shape. They do not excuse an incorrect srcset descriptor. If candidates have different proportions, review how the chosen files will fit the intended display area.

To inspect your result, make a small table with each file, its measured pixel width, and its declared w value. Every row should agree. Then compare each sizes condition with the layout at the widths it describes. This checks the information you supplied; it does not prove which candidate a particular browser will select in every viewing condition.

If a product card uses a 320-pixel slot while a hero image uses a 640-pixel slot, they need separate sizes hints even when both use the same source photograph. If the measured candidate is 1,200 pixels wide but the markup says 1280w, correct the descriptor or create a true 1,280-pixel export. A width descriptor is a statement about the file; changing the number in the markup does not resize the image. Keep the src file reachable so the page has an image outside the candidate selection path.