Back to Free Tools
FREE TOOLS
Responsive Image Width Planner
Derive image widths from fixed CSS slots, breakpoints and exact DPR products.
Explicit slot and breakpoint plan, Device-pixel-ratio list
responsive-widths.json, responsive-sizes.txt
Browser only
Runs locally in your browser. Your files, pasted content and generated output are not uploaded. Reset clears this tool’s working data.
This tool needs JavaScript. If it does not load, refresh the page and try again.
How to use this tool
- Enter ascending maximum-width breakpoints with fixed CSS-pixel slots and a final default slot.
- Enter device-pixel ratios from 1 through 4, with at most two decimal places.
- Plan widths and download the complete pair report and sizes text.
Examples
A 320-pixel slot at DPR 1.5 requires a 480-pixel image width.
Limitations
- At most 100 breakpoints, 20 DPR values, 2000 pairs, a 10000-pixel slot, a 100000-pixel viewport and 40000-pixel image width; 1 MiB combined output and 30 seconds.
- Widths use exact multiplication and ceiling, then unique ascending width descriptors. This plans fixed-pixel layouts only.
- No image generation, URL-based srcset construction, fluid CSS interpretation or browser-measured layout. Existing image-pack tools handle image exports and supplied-width srcset.
Related tools
No items found.