I've been using AI to write more code, which has also meant writing more tests—including screenshot tests to catch unexpected UI changes.
That leaves me reviewing two things: the code in GitHub and the visual diff in a Playwright report. I kept switching between them to answer a small question: did that button move, or did its padding change by a couple of pixels?
GitHub's side-by-side, swipe, and opacity views help compare images. What I wanted was explicit pixel highlighting, especially on full-page screenshots where I didn't already know where to look.
So I built gh-pixel-diff. It adds Pixel Diff to GitHub's existing image-view controls. Want to try it without installing anything? Drop two images onto the comparison page. It uses the same comparison code, and your files are processed locally in your browser.
The view opens on the changed region and reports the number and percentage of changed pixels. If edits are scattered across the screenshot, you can step through individual regions instead of scanning the whole page.
You can also:
It also supports GitLab. You can add self-hosted GitLab and GitHub Enterprise instances in settings. I use GitLab less myself, so feedback from people reviewing real merge requests there would be useful.
Add a block near the top of a page, and everything below it shifts down. A normal pixel comparison highlights much of the screenshot—even when most of the content has simply moved.
I've added an opt-in beta that tries to match horizontal pixel rows before comparing them. It uses unique matching rows as anchors, borrowing an idea from text diffs. The goal is to separate vertical shifts from other changes.
The same setting also changes how differently sized images are handled: the edge that exists in only one image remains faintly marked, but doesn't contribute to the change count or the automatic crop.
This is a heuristic, not an understanding of the page's layout. Repeated content and blank areas can produce incorrect matches. It also changes what the reported difference measures, so it's off by default. I'd especially appreciate examples where it gets the alignment wrong.
GitHub renders image diffs inside an iframe on viewscreen.githubusercontent.com. The extension adds its controls there and reads the image URLs from the frame's enc_url1 and enc_url2 parameters, preserving the signed URLs GitHub supplies for private repository images.
pixelmatch does the pixel comparison. The work runs in a Web Worker when available, with a main-thread fallback. GitLab needs a different integration because its viewer lives directly on the merge request page, but the comparison code is shared.
The extension requests access to the GitHub image-viewer domain and gitlab.com; access to self-hosted instances is requested separately when you add them. Image comparison happens in your browser, with no image-processing server or analytics.
Safari requires manual installation through Xcode. I haven't published it on the App Store because of the publishing cost.
The project is MIT-licensed; the bundled pixelmatch library is ISC-licensed.
If you review screenshot changes in PRs, give it a try. Does highlighting the diff in the PR cover what you need, or do you still need to open the test report for other context?