srcset Generator
Build a responsive image tag with width or density descriptors.
Put {w} where the width goes — or {x} in density mode. Every candidate is that address with the number filled in.
How wide the image will be drawn, per layout width. The browser reads this before it knows the layout, so it has to be told rather than measured.
Result
Good to know
- Width descriptors need sizes; density descriptors do not. With 2x the browser already knows which candidate belongs to which screen, so the sizes field disappears.
- src is the fallback for anything that ignores srcset, so it gets the largest candidate — a browser that cannot choose should not get the blurry one.
- width and height are worth filling in even with a responsive image: they give the browser the aspect ratio, and the page stops jumping when the image arrives.
- Do not load the largest image on the page lazily. loading="lazy" on the hero delays the one thing the visitor came to see.
33 views