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
    I’m an Impostor

    This is the hardest thing I've ever had to write, much less admit to myself.  I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life.  All of those feelings were very...

  • By
    Designing for Simplicity

    Before we get started, it's worth me spending a brief moment introducing myself to you. My name is Mark (or @integralist if Twitter happens to be your communication tool of choice) and I currently work for BBC News in London England as a principal engineer/tech...

Incredible Demos

  • By
    MooTools Zebra Tables Plugin

    Tabular data can oftentimes be boring, but it doesn't need to look that way! With a small MooTools class, I can make tabular data extremely easy to read by implementing "zebra" tables -- tables with alternating row background colors. The CSS The above CSS is extremely basic.

  • By
    Image Reflection with jQuery and MooTools

    One subtle detail that can make a big difference on any web design is the use of image reflections. Using them too often can become obnoxious but using reflections on large, "masthead" images is a classy enhancement. Unfortunately creating image reflections within your...

Discussion

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