Image Diff Viewer
A tool that compares two images, such as screenshots before and after a UI change. You can check them with a slider that switches between the two, a semi-transparent overlay, or a diff that highlights changed pixels in red. PNG, JPEG, and WebP are supported — all processed in your browser.
Drop a PNG, JPEG, or WebP image, or use the button
Drop a PNG, JPEG, or WebP image, or use the button
Load a before and an after image to compare them.
How to use
- Drop or choose an image for both "Before image" and "After image".
- In "Slider" mode, move the divider to compare before (left) and after (right). The arrow keys work too.
- In "Overlay" mode, change the opacity of the after image to compare them.
- In "Pixel diff" mode, differing pixels are shown in red. Raise the color tolerance to ignore JPEG noise.
About this tool
After a CSS fix or a library update, checking for unintended visual changes by eye is tedious. With the Image Diff Viewer, you just load the before and after screenshots to find what changed.
The pixel diff compares the RGB and alpha (transparency) of each pixel. Images with transparent areas can be compared, and pixels that are fully transparent in both images are treated as identical. If the image sizes differ, they're never resized automatically, so differences aren't hidden — the size mismatch is reported instead.
Automatic alignment, OCR, and automatic web page capture are not supported. Your images are never uploaded to a server.
Load the same PNG on both sides and set the color-difference threshold to 0. The changed-pixel count is 0. Replace one side with a PNG in which a small region has been repainted, and that region is highlighted, providing a straightforward check of your comparison setup.
The comparison measures RGBA differences rather than recognizing text or interface elements. Positional shifts also appear as changes, so capture screenshots at matching dimensions and zoom levels. Canvas reads the image data and the browser performs the comparison locally.
Frequently asked questions
Can I compare images of different sizes?
Only images of the same size can be compared, because automatic resizing could hide real differences. Recapture them at the same window size and zoom level.
JPEG images show lots of differences.
JPEG compression introduces subtle noise. Raise the "Color tolerance" to ignore small color differences, or use PNG for exact comparisons.
Are my images uploaded to a server?
No. Images are loaded and compared entirely in your browser.