Build a before-and-after image comparison layout

Supply the pixel dimensions of both images, choose a side-by-side presentation or a slider overlay, and receive the canvas, image rectangles, clipping regions, and vertical divider position as structured data. Matching dimensions are expected because honest visual comparisons depend on aligned content. When your source images differ, you can explicitly request a resize instruction that maps the after image to the before image dimensions before display.

Choose the comparison format that fits the story

A before-and-after presentation can answer two different viewing needs. A side-by-side image comparison layout keeps each image completely visible, which is useful when readers need to scan the whole scene, compare distant areas, or view the result without interacting. The returned canvas is twice the effective image width, with the before panel on the left, the after panel on the right, and a vertical divider at their shared boundary. A slider overlay instead places both images in the same coordinate space. Its complementary clipping rectangles expose the before image to the left of the divider and the after image to the right. This format makes small changes easier to locate because matching features stay in the same place while the divider moves. Select the mode according to the audience and interface, then use the returned rectangles directly in CSS, SVG, Canvas, or a native rendering layer. Coordinates are integer pixels, so there is no hidden layout convention to reconstruct downstream.

Handle dimensions explicitly instead of hiding mismatches

Reliable comparisons begin with equal dimensions. If one image is 1200 by 800 pixels and the other is 1000 by 800, placing them into the same overlay without a declared transformation shifts corresponding details and can exaggerate or conceal change. For that reason, the calculator rejects unequal width or height unless `resize_to_match` is enabled. With the flag enabled, the before image becomes the canonical target and the result includes the after image target dimensions plus independent horizontal and vertical scale factors. This policy is intentionally explicit: it tells the renderer exactly what adjustment is expected and gives reviewers enough information to detect non-uniform stretching. The tool does not perform the resize or choose a crop. If preserving aspect ratio matters, prepare matching sources or apply a crop in an image pipeline before requesting the layout. When dimensions already match, the resize object simply reports that no resize is required. This keeps successful results structurally predictable while avoiding optional null fields.

Turn divider output into a working interface

For a slider overlay, provide a divider percentage from zero through one hundred. The calculator converts it to the nearest pixel within the comparison canvas and returns two clips whose widths always add up to the full image width. At zero percent, the before clip has zero width and the after image is fully exposed; at one hundred percent, the reverse is true. The unchanged percentage is also returned for UI state, accessibility values, analytics, or later recalculation after a responsive resize. In side-by-side mode, two full-width panels determine the divider naturally, so it sits at the midpoint of the combined canvas regardless of the slider percentage input. Use the returned orientation and x coordinate to position a line, handle, or keyboard-operable control. A production slider should expose its current value to assistive technology, support arrow-key changes, and label which side is before and which is after. Because this capability returns geometry rather than markup, the same deterministic result can drive a website component, generated social graphic, design-system preview, or mobile application.