Designers
ToolsDocsProAll the Possibles

All 141 tools / Layout, grids and spacing

Plan srcset widths and the sizes attribute for an image from your breakpoints and device pixel ratios

Responsive image plannerFreeFor developers and designers

10 min

saved on a typical run. Our estimate, against working out srcset widths and the sizes attribute by hand for each breakpoint.

Before: what you give it

The example input, as typed in. You paste text, CSS, markup or notes.

breakpoints: 0:100vw, 768:50vw, 1200:600px
dprs: 1,2
sourceWidth: 2400
format: webp
aspect: 3:2
urlPattern: /img/hero-{w}.webp

After: what comes back

The first lines of a real run on that input. Nothing here is edited by hand.

RESPONSIVE IMAGE PLAN
Viewport widths read up to 1920px. Largest CSS width needed: 600px. DPRs: 1, 2.

srcset widths: 320, 384, 600, 767, 1200, 1534
srcset: /img/hero-320.webp 320w, /img/hero-384.webp 384w, /img/hero-600.webp 600w, /img/hero-767.webp 767w, /img/hero-1200.webp 1200w, /img/hero-1534.webp 1534w
sizes: (min-width: 1200px) 600px, (min-width: 768px) 50vw, 100vw

Markup (alt text is yours to write; leave empty only for decorative images):
<img src="/img/hero-320.webp" srcset="/img/hero-320.webp 320w, /img/hero-384.webp 384w, /img/hero-600.webp 600w, /img/hero-767.webp 767w, /img/hero-1200.webp 1200w, /img/hero-1534.webp 1534w" sizes="(min-width: 1200px) 600px, (min-width: 768px) 50vw, 100vw" width="600" height="400" alt="" loading="lazy" decoding="async">

Estimated bytes per candidate (rough):
  320px: about 9.2 KB
  384px: about 13.2 KB
  600px: about 32.2 KB
... full output on the tool page

What you get

Thinned srcset widths, the sizes string, an img tag with dimensions, and notes for above-the-fold images

What it cannot do

Plans markup from the layout widths you state; it does not resize or encode images.

Who it is for

  • Developers
  • Designers

Free and Pro

Free25 runs a day per IP address, up to 100,000 characters a run.
ProNo daily limit, 300 requests a minute, up to 200,000 characters a run.

What each plan includes

Use it from your assistant

The tool is called plan_responsive_images. Connect the server once, then ask for it by name or just describe the job. Install steps for each app.

claude mcp add --transport http designers https://designers.allthepossibles.com/mcp
curl -X POST https://designers.allthepossibles.com/api/responsive-image-plan -H 'content-type: application/json' -d '{"breakpoints":"0:100vw, 768:50vw, 1200:600px","dprs":"1,2","sourceWidth":2400,"format":"webp","aspect":"3:2","urlPattern":"/img/hero-{w}.webp"}'

Try it here

The form starts with the same example input, so you can run it first and then swap in your own.

More in layout, grids and spacing

All layout, grids and spacing tools