srcset & sizes generator
Build a complete responsive <img> or<picture> tag. The browser picks a source from DPR and the slot width your sizes attribute describes.
~~~
Image pattern
Widths
sizes rules
Attributes
How the browser picks
~~~
Output
srcset
sizes
Markup
~~~
About this tool
The srcset attribute lists image candidates with width or density descriptors. The sizes attribute tells the browser how wide the image will render at each viewport — it multiplies that slot width by device pixel ratio to choose the best file.
Always set width and heighton above-the-fold images to prevent layout shift (CLS).
~~~