What's the diff?

One of the key concepts behind version control systems (like git or mercurial), is the differential or “diff.” By diffing between code at two different states (last commit, and current state), you can see, line by line, what was added & deleted.

Text is well suited to line by line comparison, but what about images? Can you do the same type of before / after comparison? Well, kinda!

Uber’s image-diff node library uses ImageMagick to calculate visual differentials between equally sized images:

image-diff demo

The first two frames of the animation are screenshots from my Twitter timeline taken 30 seconds apart. The 3rd frame is the diff, highlighting what changed in red.

Unlike with text, image-diff can’t tell you, which pixels are new / old, but it does show the aggregate change. There’s also CLI version you can run without writing any code.

2017 Neal Shyam