How to use different comparison methods
| Display method | Easy to spot differences |
|---|---|
| Side by Side | Major layout changes, omissions, additions |
| slider | Differences in border position, size, and cropping |
| Transparent Overlay | Misalignment of several pixels, scaling |
| Difference Highlight | Color, outline, and pixel-by-pixel changes |
Comparison procedure
- Load the reference image to the left and the comparison image to the right.
- If the dimensions differ, determine whether the difference is intentional or caused by different export settings.
- Check the positional shift using the slider and transparent overlay, then switch to difference emphasis.
- Identify the location and cause of unacceptable differences and save the resulting image if necessary.
Factors that tend to cause differences
Even the same screen can render text outlines and shadows differently depending on the OS, browser, font, zoom level, GPU, and capture time. When comparing web pages, keep the viewport size and zoom level fixed.
JPEG compression artifacts can change each time the image is saved, so use a lossless format such as PNG for exact pixel comparisons.
Do not treat every nonzero difference rate as a failure. Check whether the location and appearance of the differences are within the acceptable range.
Try It in Your Browser
Your input is processed entirely in your browser. Keep the original data, review the output, and only then save or share it.
Open the Image Difference Checker