Responsive Image srcset/sizes Generator

The Responsive Image srcset/sizes Generator builds the srcset and sizes attributes for a responsive <img> tag — plus a complete, ready-to-paste tag — from one image filename or URL pattern and a list of target widths. Everything runs in your browser; nothing you type is sent to a server.

Why srcset and sizes matter

A single <img src="..."> forces every visitor to download the same file, whether on a 320px phone or a 4K monitor. Responsive images fix this by offering several resolutions and letting the browser choose:

• srcset lists candidate files paired with their intrinsic width, using a width descriptor (photo-640.jpg 640w).
• sizes tells the browser how wide the image will be rendered at different viewport widths ((max-width: 600px) 100vw, 50vw), so it can pick the right srcset candidate before layout.
• Together they let a phone download a 400px image and a desktop download a 1920px image from the same markup — no JavaScript, no server-side detection.

How to use the tool

1. Image Filename or URL Pattern — your base image path. Use {w} as a placeholder for the width if your server or CDN names files that way (/images/photo-{w}.jpg). Leave {w} out and the tool inserts the width before the extension instead: photo.jpg becomes photo-640.jpg for the 640px variant.
2. Target Widths (px) — a comma or space separated list of the widths you've actually generated (e.g. 320, 640, 960, 1280, 1920). These become the w descriptors in srcset; the largest becomes the src fallback for browsers that ignore srcset entirely.
3. sizes Attribute — describe how wide the image renders at each breakpoint, e.g. (max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw. Leave it blank for the safe default of 100vw (full viewport width).
4. Alt Text — the accessible description used in the alt attribute.
5. Add loading="lazy" and decoding="async" — checked by default, deferring off-screen images and keeping decode work off the main thread. Uncheck it for above-the-fold images (a hero banner) that should fetch and paint immediately.

The tool outputs three copyable blocks — the raw srcset value, the raw sizes value, and the full <img> tag combining both — the last one is also downloadable as an HTML snippet.

Why doesn't the filename get a "w" suffix?

Inserting a width before the extension produces photo-640.jpg, not photo-640w.jpg. The "w" only appears in the srcset width descriptor itself, after a space (photo-640.jpg 640w) — that's the actual syntax the HTML specification defines. If your real image files do use a -640w naming convention, use the {w} placeholder instead (/images/photo-{w}w.jpg) so the tool matches your filenames exactly.

Do I need to list every width I generated?

List the widths you want offered as candidates — a handful of common breakpoints (phone, tablet, small desktop, large desktop) is usually enough. Extra widths add more resources a browser could request without meaningfully improving loading beyond a certain point.

What if I leave sizes blank?

It defaults to 100vw, treating the image as filling the full viewport width. That's correct for full-width images (hero banners, blog post images) but wrong for anything narrower — a sidebar thumbnail or grid item should get a sizes value matching its actual rendered width, or the browser will over-fetch a larger image than it needs.