Calculate responsive image sizes for CSS breakpoints

This calculator converts each rendered width into a required source width using one pixel-density multiplier, then returns a sorted, deduplicated list for your responsive image set. It makes the relationship between layout CSS, device density, and source assets explicit, repeatable, and easy to pass into an image transformation or build workflow.

Translate layout rules into source pixels

Start with the breakpoints already defined by the design or stylesheet. For every breakpoint, enter the minimum viewport width at which the rule applies and the width at which the image is actually displayed. Both values use CSS pixels, so they can be copied from layout specifications without converting units first. The calculator sorts the rows by breakpoint, which means the input may follow the order used in a design document, a ticket, or a component configuration. Each display width is multiplied by the selected pixel density, and the result is rounded upward to a whole source pixel. Rounding upward matters when a fractional display width or multiplier produces a decimal: rounding down could create an asset that is one pixel smaller than the stated requirement. The returned sizes preserve every breakpoint rule, while the separate source-width list removes repeated output widths. That deduplicated list is the practical set of image variants to generate, cache, and reference in a responsive image workflow.

Choose a pixel-density multiplier deliberately

The default multiplier is 2, a useful baseline when a site wants images to remain crisp on common high-density displays. A displayed width of 480 CSS pixels therefore requires a 960-pixel source at that density. You can choose another multiplier from 0.1 through 8 when the delivery policy has different goals. A multiplier of 1 targets ordinary-density output and minimizes generated dimensions, while 3 prepares for denser screens at a larger storage and transfer cost. The same multiplier is applied to every breakpoint so the result represents one consistent asset policy rather than a mixture of assumptions. This tool does not decide whether every visitor should download the largest candidate, nor does it estimate compression or file size. It calculates width requirements only. Use the resulting unique source widths as inputs to an optimizer or transformation service, then let the browser select among those assets using the markup and media rules appropriate to the component. Keeping density explicit makes reviews easier because designers and developers can see exactly why each source dimension exists.

Use the result in a responsive image pipeline

The response contains three parts: the multiplier that was applied, a sorted row for every breakpoint, and a numeric list of unique source widths. The per-breakpoint rows are useful for checking implementation against the design because each row shows the original display width beside its calculated source width. The unique list is useful for automation because two layout rules may require the same generated asset. For example, different breakpoint conditions can both display an image at 600 CSS pixels; with a multiplier of 2, only one 1200-pixel variant needs to be generated. Feed each unique width into an image resizing stage, retain aspect ratio there, and use the generated URLs in your markup or image component. Keep crop behavior, format selection, quality, and height calculations in that downstream stage because they depend on the source image and art direction, not merely on breakpoint widths. Empty breakpoint lists are rejected because they cannot describe a responsive set, and duplicate breakpoint values are rejected because two competing rules at the same threshold would make the specification ambiguous.