Generate responsive img srcset and picture markup from a filename pattern, width list, sizes attribute and alt text. Responsive Image Srcset Generator is a free online tool from the ToolsRift HTML Tools collection. It runs entirely in your browser — nothing to install, no signup, and your data never leaves your device.
Loading Responsive Image Srcset Generator…
How to use Responsive Image Srcset Generator
Enter a filename pattern using {w} as the width placeholder (e.g. image-{w}.jpg), list your target widths, set the sizes attribute and alt text. The img and picture markup update live for you to copy.
Frequently asked questions
What does the {w} placeholder do?
The {w} token in your filename pattern is replaced by each width you list. For example image-{w}.jpg with widths 320 and 640 produces image-320.jpg and image-640.jpg in the srcset.
What is the difference between the img and picture output?
The img version uses one srcset with width descriptors so the browser picks a size. The picture version adds <source> elements offering a modern format (AVIF or WebP) with a fallback for browsers that don't support it.
What should the sizes attribute contain?
sizes tells the browser how wide the image will render at different breakpoints, e.g. (max-width: 600px) 100vw, 600px. The browser uses it with srcset to choose the most appropriate file before layout.
ToolsRift processes your files in your browser. We use cookies only for basic analytics and to support ads that keep every tool free. See our Cookie Policy.