Before and After Image Comparison Builder

How to use Before and After Image Comparison Builder

Create a standalone before-and-after HTML comparison from two equal-size local images, with a keyboard range and embedded PNG copies. Share a deliberate visual comparison without an account, hosted widget or external image URLs. Choose your two images and literal labels, then download one real HTML document with its image data and fixed local behavior. Its reveal control clips the after image rather than resizing or aligning either source. The product page never mounts the exported document.

1. Provide before image, after image with identical dimensions, document title, before image description, after image description, initial after reveal percent.
2. Choose the supported mode and run the tool. Review its assumptions and any reported errors.
3. Copy the result or download a separate output; reset to clear the current form.

Good to know

• Exactly two local images, 1 byte through 8 MiB each and 16 MiB combined, with exactly equal dimensions. Each image is at most 1,000,000 pixels and 2,048 per side. Both headers and all aggregate input limits are checked before any native decoding. Static PNG, single-frame baseline JPEG or simple VP8/VP8L WebP only; full bounded structure/CRC preflight precedes native decoding. SVG, GIF, APNG, progressive JPEG, extended/animated WebP and compressed PNG metadata are refused. Native dimensions must match the header, including orientation.
• Native image decode has a 10-second wait and PNG encoding a 5-second wait. Late bitmaps are closed and every bitmap/canvas is released on completion or error; native codec work cannot be forcibly aborted. The two sources are decoded and re-encoded sequentially. PNG copies total at most 8 MiB and the planned standalone HTML is capped at 12 MiB before base64 construction.
• The title is literal well-formed single-line text within 200 UTF-8 bytes; each image description is within 120 bytes. Controls, NUL, lone surrogates and forbidden XML noncharacters are refused. Initial reveal uses plain integer digits from 0 through 100, without fractions, signs or exponents. No supplied markup, stylesheet, script, resource URL or template is accepted.
• Download image-comparison.html and deliberately open the separate file. It embeds two PNG data URIs, a real native range, visible output and before/half/after buttons. Only one fixed authored behavior function becomes an inline script; its actual UTF-8 source receives a SHA-256 CSP hash. User labels are escaped outside script/style source. The artifact requests no remote image, library or font and contains no storage, animation or timer.
• The after image is revealed from the left. The visible percentage denotes horizontal clipping, not changed-pixel coverage, semantic improvement or image registration. Equal dimensions do not establish matching framing, subject, color, identity or authenticity. No crop, automatic alignment, resampling or difference metric is performed.
• Browser decoding, color management, alpha premultiplication and PNG encoding can change source samples or metadata. New PNG copies are used; original source bytes, editing history and color appearance are not preserved or certified. Both embedded images remain recoverable in full regardless of the initial split; this is not redaction or access control.
• The exported file needs a browser that supports native range controls, rectangular CSS clipping, inline hash CSP and data-image PNG decoding. Inspect keyboard/touch behavior, assistive technology, fonts and target-host policy yourself; no universal accessibility or rendering certification is implied. A no-script message describes the static initial split when the fixed script is blocked.
• The output may contain private image content and literal labels. No input is uploaded, stored or opened remotely, no original is overwritten, and the product page does not render your generated HTML. Review the separate artifact before sharing.
• Structured text output is limited to 500,000 characters. Reduce the supplied source when that separate output budget is exceeded.
• Inputs are processed on this device and are not automatically saved or uploaded.