Check changed areas of an image in the browser
After loading Before and After, you can switch among side-by-side, overlay, and pixel-diff views in the browser.
Open the Image Difference CheckerConclusion: Narrow down gradually from overall comparison to pixel differences
First use side-by-side view to inspect omissions and additions, then use overlay to check misalignment, and finally read pixel differences and statistics. Do not decide pass or fail from the difference rate alone; confirm that highlighted locations are the intended changes.
Different File Hashes and different display Pixels are not the same thing. Images that differ only in Metadata may match in Pixel comparisons.
Check the images to compare and the assumptions.
Align left/right roles, image dimensions, format, and capture conditions. If the baseline is reversed, the number of differing pixels is the same but the explanation of the changes is reversed.
| Item | What to check | Impact on differences |
|---|---|---|
| left and right | Fix the left as Before and the right as After | Make the direction of changes easier to explain |
| Dimensions | Check width and height | Separate differences in margins and positional offset |
| Format | Check PNG, JPEG, WebP, and more | Predict effects of compression and Alpha |
| Capture conditions | Match the Viewport, scale, and Font | Reduce noise caused by environment differences |
Check with the image diff comparison tool
- 1. Select the reference image on the left and the modified image on the right.
- 2. Check the displayed width, height, and file name.
- 3. Review large changes side by side.
- 4. Adjust overlay opacity to check outline misalignment.
- 5. Switch to pixel differences and check the threshold and number of differing pixels.
- 6. If needed, save the difference image as PNG.
Check image size, position, and resolution
The current tool uses the larger width and height of two images as the comparison canvas and centers each image. If dimensions match, it can compare the same coordinates directly.
Images with different sizes are not automatically scaled. Do not mistake differences around the image for content changes.
Read Pixel Diff and statistics.
For each pixel, find the maximum difference among R, G, B, and alpha, and count coordinates exceeding the threshold as changed pixels. The difference ratio is the number of changed pixels divided by the total number of pixels compared.
| Display | meaning | Notes for making a determination |
|---|---|---|
| Differential number of pixels | Number of coordinates exceeding the Threshold | Number of coordinates, not changed area |
| Difference ratio | Differing pixel count ÷ total pixel count | Small UI component changes are important even when the rate is low |
| Maximum difference | Display the maximum channel difference from 0 to 255 | Do not display which channel it is |
Adjust the Threshold
First, inspect the distribution with the initial value of 16. Lower it if you want to include subtle edge differences, and raise it gradually if you want to suppress compression noise. Check highlighted locations and statistics together whenever you change the value.
There is no universally correct Threshold value. Define the comparison purpose and acceptable Rendering differences, then evaluate continuously under the same conditions.
Check alpha, antialiasing, and image format.
Even if they look the same, differences can result from JPEG compression, font rendering, and RGB values of transparent pixels. The current tool performs strict RGBA comparison including alpha, so isolate differences from visual appearance by cause.
| Factors | Differences that occur | How to check |
|---|---|---|
| JPEG | Subtle color differences across a wide area | Also compare the PNG version. |
| Anti-aliasing | Dot-like differences at the boundaries of text or diagonal lines | Recapture using the same OS, browser, and font. |
| Alpha | Differences in transparent areas and semi-transparent shadows | Change the background color and check the appearance as well. |
Reduce unnecessary differences and isolate the cause.
- Swap left and right to rule out mixing up Before / After.
- Place the same image on the left and right and check whether the difference becomes 0.
- If image dimensions differ, align the original capture area.
- For JPEG, also compare output re-exported as PNG.
- Map highlighted locations to elements on the original screen, not only the difference rate.
Use image comparison methods appropriately
| Algorithm | Differences that are easy to check | This Tool |
|---|---|---|
| Side-by-Side | Additions, deletions, and major layout changes | Supported |
| Overlay | Visual checks with changed position, edges, and opacity | Supported |
| Pixel-level Diff | RGBA differences at the same coordinates and the number of differing pixels | Supported |
| Visual / Perceptual Diff | A judgment that allows small differences people perceive as the same | Dedicated detection is not supported |
Pixel-level Diff does not understand visual meaning; it compares values at the same coordinates. Evaluate numeric differences separately from defects visible to users.
Supported scope of the current image diff comparison tool
| Item | Current support | Unsupported features and verification notes |
|---|---|---|
| Input | Left and right file selection, Drag & Drop, and dropping one or two items onto the page | No clipboard pasting or URL loading |
| Format | PNG, JPEG, WebP, GIF, BMP, SVG, and similar formats that the browser can decode as image/* | HEIC and similar formats depend on browser support, and all-frame comparison for animated images is unavailable |
| Display | Side-by-Side, Overlay, Pixel difference, and Zoom | There is no Swipe Slider or synchronized Pan |
| Dimensions | Center each image on the larger canvas | No automatic resize, crop, manual offset, or automatic alignment |
| Difference determination | Treat a Pixel as changed when the maximum RGBA Channel difference exceeds the Threshold. | Threshold ranges from 0 to 255 and is different from Pixelmatch's 0 to 1 setting |
| Alpha and outlines | Include the alpha channel in comparison. | There is no alpha ignore, background compositing, or antialiasing exclusion. |
| Statistics | Compared dimensions, differing pixel count, difference rate, and maximum channel difference | No Similarity rate, Bounding Box, or difference region count |
| output | Download the difference image as PNG | Saving comparison settings or history and exporting reports are not supported. |
| Processing location | Decode, Canvas drawing, and comparison run on the browser's main thread | Web Worker is not used. The Tool does not Upload image Binary or File names to the Server |
When image sizes differ, center the smaller image without enlarging it and compare surrounding transparent areas as well. This is not the result of automatic alignment or cropping.
Compare primary sources with the current implementation
- Pixelmatch: GitHub Repository
- Playwright: Visual Comparisons
- MDN: Pixel manipulation with canvas
- MDN: CanvasRenderingContext2D.drawImage()
- MDN: ImageData
Pixelmatch and Playwright Thresholds and Options are specific to their respective Libraries. Do not treat them as the same values as DevelopTools' 0–255 Threshold; check the official documentation for the implementation you use.
An example of comparing before and after changes in the settings screen
Prepare PNGs captured with the same viewport as Before and After.
Verify that layout shifts were not introduced when the intention was to change only the button color.
- Load Before on the left.
- Load After on the right.
- Verify that outlines overlap in the Overlay.
- Confirm that only the area around the button is emphasized by the Pixel difference.
- Record the differing pixel count and threshold.
If elements other than the intended button are also highlighted, check font, animation, and viewport conditions.
Frequently asked questions
- Is the image content sent to a server?
- Comparison processing runs in the browser, and the tool does not upload selected images to a server.
- If the difference rate is 0%, are the files completely identical?
- Displayed Pixels match within the configured Threshold, but verify File Binary equality, including Metadata and compression structure, separately with a Hash.