Srcset Generator

Generate responsive image srcset and sizes markup

Responsive images let browsers download an appropriate resolution for the viewport. The srcset attribute lists candidate URLs with width descriptors (320w, 640w, …), while sizes tells the user agent how wide the image renders at different breakpoints.

Filename patterns

Provide a URL or filename pattern with a {w} placeholder, or a basename such as hero.jpg to append -{width} before the extension. List target widths in pixels separated by commas.

The default src uses the largest width entry, which matches common lazy-loading setups where the browser still needs a fallback URL.