Comparisons need consistent units. A hundred source-image pixels, displayed screen pixels and CSS pixels are not always the same span. PolishTools measurements and color selection use source-image coordinates.
Measure the difference between coordinates
X=20 to X=120 spans 100px. That is different from counting both endpoint pixels inclusively. When both axes change, straight-line distance is diagonal: differences of 30px and 40px give 50px.
Inspect color and alpha together
In #RRGGBBAA, AA is alpha. The same red with lower alpha appears differently over a background. The preview checkerboard is not part of the source pixels and is not sampled.
Read the difference map
Image diff aligns files at the top-left and counts changed pixels. Re-saving the same design as JPEG can introduce compression differences. For alignment or font changes, inspect the original and overlay before using a higher threshold to hide differences.
Example: checking a button
Check whether a button moved and whether its color changed between screenshots.
Steps
- Check that both screenshots have the same source dimensions.
- Measure its endpoints with the ruler and sample a central pixel with the color picker.
- Overlay the two images and generate a difference map.
Result
Record position as coordinates, color as RGBA and changed regions as a diff PNG. Different color profiles and browser decoding can still lead to different results in other applications.
Frequently asked questions
Must the preview be at 100%?
No, calculations use source coordinates. Enter exact coordinates for features too small to select reliably with a pointer.