HTML srcset Generator

How to use

1. 1Pick a mode at the top: Width descriptors for layouts that change with the viewport, or Density descriptors for a single rendered size on high-DPI screens.
2. 2Enter a filename pattern with {w} and {ext} tokens, e.g. /images/hero-{w}.jpg. The fallback width sets the file that goes into the src attribute for older browsers.
3. 3List the widths or densities you want in the srcset. Use a preset to load the common 7-step ladder, WordPress sizes, or Tailwind breakpoints in one click.
4. 4Build the sizes attribute with a preset (full width, half on desktop, three-column grid) or add custom media-query rules by hand. Skip this in density mode.
5. 5Optionally tick Picture element and enable AVIF, WebP, or PNG sources to add format fallbacks. The output emits sources in the correct probe order.
6. 6Set the alt text, loading, decoding, and fetchpriority attributes, then read the validation panel for any warnings before pasting the generated tag into your template.

About this tool

HTML srcset Generator builds responsive image markup that is ready to paste into any HTML, JSX, or template file. The tool covers both srcset flavors the spec defines. Width descriptors (the 320w, 640w, 1280w form) pair with a sizes attribute so the browser knows the rendered width at each viewport and can pick the smallest file that satisfies the layout times the device pixel ratio; this is the right tool for hero images, article media, and any layout where the rendered size changes with the viewport. Density descriptors (the 1x, 2x, 3x form) target a single rendered size and let the browser pick a sharper file on high-DPI screens without a sizes attribute. A filename pattern with {w} and {ext} tokens expands into every variant from a single template, so /images/hero-{w}.jpg yields hero-320.jpg, hero-640.jpg, hero-1280.jpg, and the rest in one step. Width presets cover the common 7-step ladder (320 to 1920), WordPress core sizes, Tailwind breakpoints, a tight 4-step set for hero images, and a thumbnail set. The sizes builder ships with presets for the most common layouts (always full width, full on mobile then a fixed max on desktop, half-width on desktop, three-column grid, fixed pixel width) and lets you add and remove media-query rules by hand. A picture-element toggle adds AVIF, WebP, and JPEG sources with type hints in the correct probe order, so modern browsers download the smallest format and older clients fall back gracefully. Img-tag attributes are first-class: alt text for screen readers, loading set to lazy or eager, decoding set to async or sync, and fetchpriority set to high for the LCP image. Validation surfaces the issues that quietly break responsive images in production: a width-descriptor srcset without a sizes attribute (the silent 100vw default), a single-width srcset that defeats the whole feature, a missing {w} token in the filename pattern, duplicate width entries, and an empty alt attribute on a non-decorative image. A live preview renders the fallback file using the URL the generator produced, and a copy button puts the full tag, the picture element, the srcset value, or the sizes value straight on your clipboard. Useful for Core Web Vitals work, content management system templates, blog post bodies, marketing pages, and any place an image needs to look sharp on a phone and a 4K screen without the browser downloading more bytes than the layout needs. Everything runs in your browser. Nothing you type is uploaded, logged, or shared.

Free to use. Works in your browser. No signup, no login.