Img Srcset Builder

You exported the same photo at 400, 800 and 1200 pixels and now you need the markup that lets the browser pick the right one. The syntax is short but fussy: a w descriptor after each URL, commas between entries, and a sizes value nobody remembers by heart. One small mistake and the browser quietly ignores the whole srcset and downloads whatever sits in src. This builder glues the four parts into a finished tag.

Worth knowing what the tool does and does not do. It concatenates four fields into an img tag, and srcset is a free-text field: you type the full list yourself in the form url 400w, url 800w. There is no per-file input, no width detection and no validation. The part that trips most people is sizes: leave it out and the browser assumes 100vw, usually fetching a bigger file than needed, because the choice happens before layout exists.

Double-check that the number before each w is the file's real pixel width, not the slot width in your layout, and never mix w and x descriptors in one list. The alt text is genuinely required. If what you actually need is a different crop on phones, srcset is the wrong tool and the picture element with source is the right one. The tag is assembled in your browser, and no URL or image leaves the page.