How to use Responsive Image Markup Planner
- List same-composition image URLs and their actual intrinsic widths.
- Enter viewport breakpoints, slot widths, fallback width and scenario DPR.
- Review candidate shortfalls and download the HTML markup with its scenario table.
Example: Responsive Image Markup Planner
Prepare width-based image markup from entered candidate widths, viewport slots and a declared device pixel ratio.
You add
Image candidates (JSON): "[\n {\n \"url\": \"/small.jpg\",\n \"width\": 400\n },\n {\n \"url\": \"/medium.jpg\",\n \"width\": 800\n },\n {\n \"url\": \"/large.jpg\",\n \"width\": 1600\n }\n]"
Viewport slots (JSON): "[\n {\n \"maxViewport\": 600,\n \"slot\": 360\n },\n {\n \"maxViewport\": 1200,\n \"slot\": 720\n }\n]"
Slot width above final breakpoint (CSS pixels): 960
Scenario device pixel ratio: 2
Image alternative text: "An entered sample photograph"
You get
3 width candidates; 3 viewport scenarios.
Options
- Intrinsic width
- Enter the candidate’s real pixel width. The tool does not open images to confirm it.
- Slot and DPR
- The table compares slot width multiplied by DPR with the entered candidates. This is a planning model rather than a browser choice guarantee.
Supported inputs and limits
Up to 30 distinct candidate widths and 20 breakpoint slots. One supplied format/composition; no file inspection, format fallback, optimization or bandwidth-saving prediction. Downloaded markup uses entered URLs.
Where your input is processed
This tool processes your input in this browser. Your text and files are not uploaded to UseFreeTools. Check this tool's limits for anything it may save on your device.
The declared slot must match your layout
A correct srcset can still accompany an inaccurate sizes value. Check the rendered slot at relevant viewports and keep each candidate’s composition consistent. Browsers can account for network conditions, caching and user preferences when choosing a source.
Questions about Responsive Image Markup Planner
Does it resize my images?
No. It prepares markup for candidates you already have.
Is the suggested candidate guaranteed?
The table uses its declared width model; browsers may choose differently.
Can I enter mixed crops?
Use a coherent composition; art-direction picture markup is outside this planner.