How to Use This Tool
Resolve viewport padding, max-width, columns and gaps into a concrete image slot. Calculate responsive image slot width, DPR source target, viewport share and effective container width for one layout breakpoint.
The decision this tool supports
A sizes hint based only on viewport width can overstate the real image slot inside max-width containers and multi-column grids. This page keeps the decision bounded to rendered image slot width and the supporting outputs shown beside it. Responsive Image Slot does not import an account, infer a market rate, or silently substitute an industry average.
Inputs and units
The Responsive Image Slot calculation uses Viewport width, Layout maximum width, Viewport side padding, Columns at this breakpoint, Column gap, Device pixel ratio target. Keep all money values in one currency and all time, distance, mass, energy or volume entries in the unit printed beside the field. Mixing Responsive Image Slot scopes can produce a plausible number with the wrong meaning.
- Viewport width is entered in px.
- Layout maximum width is entered in px.
- Viewport side padding is entered in px each.
- Columns at this breakpoint is entered in columns.
- Column gap is entered in px.
- Device pixel ratio target is entered in DPR.
Formula and worked check
Container = min(viewport − two side paddings, max width); slot = (container − total column gaps) ÷ columns; source target = slot × DPR. At 1,440 px viewport, 24 px side padding, 1,200 px max width, three columns and 24 px gaps, the slot is 384 px and a 2× target is 768 px. The Responsive Image Slot default is an executable known-answer case, not a benchmark or recommendation. Change one input and verify that the direction of rendered image slot width still matches the stated relationship.
How to interpret the result
Repeat the calculation at each breakpoint and express the browser hint in the CSS length that matches the actual layout. The additional Responsive Image Slot outputs expose the denominator, comparison, capacity or reverse value needed to audit the primary result instead of presenting one unexplained number.
Assumptions
- Padding is equal on both viewport sides.
- Columns are equal-width at the selected breakpoint.
- DPR target is a source-selection planning value.
Save the Responsive Image Slot input values and date with any material decision. A later Responsive Image Slot rerun is reproducible only when the same assumptions and units are available.
Limitations and safety boundary
The model does not parse CSS, evaluate media queries, account for zoom, intrinsic constraints, borders or predict the browser's final srcset choice. Responsive Image Slot is an estimate and cannot replace a contract, local code, licensed professional, calibrated measurement, lender statement or platform report where one governs the decision.
Source and privacy
The Responsive Image Slot definition or rule was checked against MDN — Responsive images on 2026-08-26. Recheck MDN — Responsive images when a specification or policy behind Responsive Image Slot can change. Responsive Image Slot arithmetic runs in this browser tab; ecech does not receive the values through a calculation API.
Sources & assumptions
Tool Spec v2 · verified 2026-08-26. Platform rules and fees can change; the editable inputs remain authoritative for your account.
Official references
- MDN — Responsive images (checked 2026-08-26)
Model assumptions
- Padding is equal on both viewport sides.
- Columns are equal-width at the selected breakpoint.
- DPR target is a source-selection planning value.
- The model does not parse CSS, evaluate media queries, account for zoom, intrinsic constraints, borders or predict the browser's final srcset choice.
