Responsive Image srcset Generator
NewBuild a complete <img srcset> and sizes attribute from a base image URL pattern and a list of target widths.
Frequently Asked Questions
What does the {w} placeholder in the URL pattern mean?
It marks where the tool should substitute each width value from your widths list — for example a pattern like https://cdn.example.com/photo-{w}.jpg with widths 320, 640 generates photo-320.jpg and photo-640.jpg entries. Your actual image hosting/CDN needs to support generating (or already have) files at those exact widths.
How is the sizes attribute different from srcset?
srcset lists the available image widths so the browser knows what's downloadable; sizes tells the browser how wide the image will actually be displayed at different viewport widths, so it can pick the smallest sufficient srcset candidate instead of always grabbing the largest one.
What is the fallback width used for?
It becomes the plain src attribute, which browsers that don't support srcset/sizes (or during the initial parse before those attributes are evaluated) fall back to — pick a reasonably sized middle-of-the-road width rather than your smallest or largest.
Does this actually resize or generate the image files for me?
No — it only generates the HTML markup. You still need an image CDN, build-time image pipeline, or manually-exported files at each of the widths you list for the URLs to actually resolve to correctly-sized images.
Why does it add loading="lazy" automatically?
Lazy-loading below-the-fold images is a widely recommended default for performance, deferring image downloads until they're about to enter the viewport — remove that attribute manually if the image is above the fold and should load immediately (like a hero image).