How to Create a Diff of Two Images

By  on  

When I was a child, I loved looking for Waldo in the "Where's Waldo?" book series. These days I'm a sucker for TMZ's "What's the Big Frigin Difference" images, where TMZ slightly changes an image and you have to spot the differences between the two. That got me to thinking -- how easily could I automate diff'ing two images? This StackOverflow post was gold.

To create a diff of two similar images, we'll use ImageMagick's convert command line utility with a large host of configurations:

convert '(' image1.png -flatten -grayscale Rec709Luminance ')' \
        '(' image2.png -flatten -grayscale Rec709Luminance ')' \
        '(' -clone 0-1 -compose darken -composite ')' \
        -channel RGB -combine diff.png

How effective is this command with its configuration arguments? Let's have a look:

Original Image

Modified Image

Diff'ed Image

The diff image result is pretty informative! The size of the sunglasses is clearly presented, and if you look closely, you can see one skull at the top-right of the shirt has been flipped.

Whatever your reason for wanting to identify the difference two images, ImageMagick's convert tool is impressive. You can do a million things with ImageMagick; check out my Media tutorials to learn more awesome ways to modify images, videos, and audio!

Recent Features

  • By
    Interview with a Pornhub Web Developer

    Regardless of your stance on pornography, it would be impossible to deny the massive impact the adult website industry has had on pushing the web forward. From pushing the browser's video limits to pushing ads through WebSocket so ad blockers don't detect them, you have...

  • By
    Conquering Impostor Syndrome

    Two years ago I documented my struggles with Imposter Syndrome and the response was immense.  I received messages of support and commiseration from new web developers, veteran engineers, and even persons of all experience levels in other professions.  I've even caught myself reading the post...

Incredible Demos

  • By
    Custom Scrollbars in WebKit

    Before each of the browser vendors we like was providing unique CSS controls, Internet Explorer was setting the tone.  One such example is IE's early implementation of CSS filters. Internet Explorer was also the first browser that allowed developers to, for better or worse, customize...

  • By
    Introducing MooTools HeatMap

    It's often interesting to think about where on a given element, whether it be the page, an image, or a static DIV, your users are clicking.  With that curiosity in mind, I've created HeatMap: a MooTools class that allows you to detect, load, save, and...

Discussion

    Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!