Loading…

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.

More HTML Tools

HTML Form Generator
Build a complete HTML form with method, action, labelled input fields, textarea, select and a submit button from a simple field list
HTML Select Dropdown Generator
Generate a select dropdown with option tags from one line per option, supporting value|label pairs, a name and multiple attribute
HTML Video Tag Generator
Generate an HTML5 video tag with controls, poster, autoplay, loop, muted and multiple source formats plus a caption track
HTML Audio Tag Generator
Generate an HTML5 audio element with controls, autoplay, loop, muted, preload and multiple MP3/OGG/WAV source fallbacks
HTML Figure & Caption Generator
Generate a semantic figure element wrapping an image with a figcaption, ideal for accessible captioned images and diagrams
HTML Details Accordion Generator
Generate native details/summary accordion markup from title and content blocks, with an optional open-by-default first item
HTML Definition List Generator
Turn term: definition lines into a semantic dl with dt and dd elements for glossaries, metadata and FAQ-style content
HTML5 Semantic Layout Generator
Generate a semantic HTML5 page skeleton with header, nav, main, article, aside, section and footer landmark elements
HTML Blockquote Generator
Generate a semantic blockquote with an optional cite URL and a figcaption author attribution for quotes and testimonials
HTML Nav Menu Generator
Build an accessible nav menu of anchor links from label|url lines, wrapped in nav and an unordered list for site navigation
HTML Tag Counter
Count how many of each HTML tag exists in your code with detailed statistics breakdown
HTML Attribute Extractor
Extract all attributes from specific HTML elements and list their names and values

← View all HTML ToolsBrowse all 1,100+ tools →