Image Comparison Slider — Align Before and After Images

A before after image comparison shows two local photographs in one aligned frame, with a movable boundary that reveals one version against the other. Load the original and revised images, choose a fit mode, adjust the dividing line, and export a PNG showing the current comparison. You can also change zoom and the position of the second image when the files are not perfectly aligned. A meaningful comparison depends on comparable framing and honest image treatment; the slider displays real pixels but cannot determine whether a scene has been captured under equal conditions.

Before-and-After Image Comparison At a Glance

What the Movable Divider Actually Shows

The dividing line acts as a visual mask over two images rendered on a common canvas. Pixels on one side come from the after image, and pixels on the other come from the before image. Moving the divider reveals additional areas without resizing the originals or editing their contents. This makes it practical to examine a retouched photograph, a restored object, a revised interface, or an artwork correction. The result is only as trustworthy as the chosen pair: two photographs with different lighting or perspective may look unlike each other even when the underlying subject has not changed.

Selecting a Comparable Before and After Pair

The strongest comparison pairs show the same subject, position, angle, and lighting wherever those conditions are controllable. For screenshot design reviews, match the application state, viewport dimensions, and interface scale. For product photography, match camera position and exposure before attributing visible differences to retouching. For construction progress, record the dates and viewpoint if the comparison may be shared publicly. A slider cannot infer changes in weather, camera sensor characteristics, lens distortion, or time of day. Differences caused by those factors may otherwise be mistaken for changes to the item being reviewed.

Choosing Contain or Cover

Contain scales each image until the whole picture fits inside the canvas without cropping its edges, potentially leaving empty bands. This is useful when the entire photo must remain visible and when cropping would hide important evidence. Cover fills the available comparison area, cropping whichever edges do not fit the selected aspect ratio. That mode can create a cleaner immersive preview for similar compositions, but may silently hide content near the borders. The fit choice should reflect whether the comparison is a visual presentation or a careful examination. Use contain when complete framing matters more than filling every pixel.

Zooming Without Confusing Alignment

Zoom applies a shared scale to both images, allowing closer inspection of scratches, text, brushwork, and other fine details. When zoomed in, part of each image may extend beyond the visible canvas, so the output no longer represents the complete photograph. The after-image offsets remain separate controls for alignment. Begin with the default scale and divider near the middle, determine whether major objects line up, and increase zoom only after the general framing is correct. A large zoom can make minor compression differences appear dramatic, so return to the wider view before drawing conclusions about overall quality.

Horizontal and Vertical Offset Controls

The after-image horizontal and vertical offsets shift its placement relative to the before image by a percentage of the comparison canvas. They are intended for small discrepancies in cropping or camera position, such as an object appearing a few pixels further to the left. Offsets do not rotate, stretch, perspective-correct, or register images automatically. If one screenshot was captured at a different device scale, simple translation may not align its buttons and text. In that case create matching screenshots first or use a specialist registration workflow, then compare the corrected versions with a transparent record of the adjustment.

Comparing Interface Screenshots Responsibly

Interface regression reviews often involve screenshots of the same screen before and after a CSS or component change. Keep the browser zoom, viewport width, font rendering environment, and loaded data identical when practical. If the after version includes changed timestamps, names, or personalized content, those unrelated differences may distract from the intended change. The divider is especially useful for checking edge alignment, navigation spacing, typography shifts, and clipped controls. For measurable pixel differences or accessibility testing, pair the visual inspection with automated layout assertions and live keyboard tests; a slider alone cannot establish functional correctness.

Worked Example: Checking a Photo Restoration

Suppose an archival photograph has been cleaned to reduce dust and scratches while retaining original detail. Load the untouched scan as the before image and the restored version as after. Select contain so the original borders remain visible, place the divider near an area of damage, and move it slowly across the repaired section. Increase zoom to inspect whether the retouching softened printed texture or removed meaningful marks. If the scan crops do not align, use modest offsets and note those changes. Export the current split for documentation, but retain both complete source images for a fuller before-and-after record.

Working with Transparent Areas

PNG and WebP can contain transparency, which can make image edges difficult to judge against an unknown backdrop. The comparison workspace offers a checkerboard, a white field, and a black field so transparent pixels have an intentional visual context. Switching backgrounds changes only the comparison display; it does not erase an alpha channel or replace the originals. A transparent logo may appear correct on white while revealing halos on dark gray. Check several backgrounds when the image will be placed over varied colors. If transparency itself is the concern, a check PNG transparency operation can report alpha coverage numerically.

Exporting a Trustworthy Composite

The downloaded PNG contains the actual canvas as currently displayed, including the split boundary, chosen background, scale, and after-image alignment. It is not an export of two full-resolution originals or a layered project file. The canvas dimensions are bounded to keep large images manageable, so a composite may have fewer pixels than either input file. If evidence needs to be preserved, archive the original before and after files alongside the composite and describe any translation or zoom used. Do not present a narrow split snapshot as though it captures every detail of both complete images.

File Format and Resolution Considerations

JPEG is common for photographs but introduces lossy compression, which can create slight artifacts even if the subject is unchanged. PNG preserves pixels losslessly and is often preferable for interface screenshots, line graphics, and comparisons involving text. WebP may be lossy or lossless depending on how the input was saved. An image with very high dimensions also consumes substantial memory once decoded, regardless of its compressed file size. The workspace limits both file bytes and pixel count, rejecting oversized images instead of risking an unresponsive editor. For very large assets, prepare smaller copies in a consistent way before performing the comparison.

Interpreting Differences Without Overclaiming

A comparison can reveal the location and visible magnitude of a change, but it cannot identify the cause. If an object appears brighter, the explanation might be altered lighting, color correction, display profiling, or a changed surface. If text appears shifted in a screenshot, it may reflect font loading or browser scaling rather than a deliberate design revision. Treat the divider as an inspection aid, not a measurement of objective improvement. When publishing a comparison in marketing or documentary material, ensure that the source files and accompanying claims fairly represent the conditions under which each image was produced.

Keeping Visual Review Accessible

A moving divider is visual by nature, and not every reader can reliably interpret the difference. Provide descriptive accompanying text that identifies the meaningful changes instead of relying solely on the motion of a boundary. Where the comparison affects an accessibility decision, inspect the underlying live interface rather than assuming the screenshots prove sufficient contrast, logical focus order, or assistive-technology support. Label the images clearly and preserve the direction of change. For archived project approvals, keep a written summary with the composite so someone reviewing the file later understands what was compared and why.

Deciding When a Split View Is Appropriate

A split view works best when both images share the same framing and a meaningful change is concentrated in the pixels. It is less informative when the photographs depict unrelated scenes, contain different crops, or require extensive perspective correction. In those cases, side-by-side images with separate captions may be fairer and easier to understand. If visual annotations are needed to identify particular improvements, use an annotate screenshot online workspace to mark a single exported comparison or other evidence image. Keep the full context available so the arrows do not overstate what the images actually show.

Frequently Asked Questions About Before After Image Comparison