
Image diffing using CSS - ck2
http://franklinta.com/2014/11/30/image-diffing-using-css/
======
bennettfeely
If it's two images you are comparing you can use `background-blend-mode:
difference` to spot the differences also.

E.g.
[http://codepen.io/bennettfeely/pen/NGdzjr](http://codepen.io/bennettfeely/pen/NGdzjr)

------
Bognar
This is the same general method as I used to quickly solve "spot-the-
difference" games as a child. Just cross your eyes until the images match and
let your brain pick out the disparities.

~~~
tomphoolery
Does this method also work when I'm missing a semicolon somewhere between
lines 35 and 994?

~~~
loopdoend
Use an IDE or a linter.

~~~
hueving
Or git diff

------
BinRoo
What if the two images were taken from a camera instead, and are subject to
some noise/transformation? I worked on an image algorithm on this related
problem a couple years ago: [http://shuklan.com/photo/difference-
analyzer/](http://shuklan.com/photo/difference-analyzer/)

------
jamesfisher
I would like to see an image diff which could reason about insertions and
deletions as well as just changed pixels. For example if I were to insert a
new section in a webpage, and take a screenshot before and after, the image
diff would show the new section of the screenshot in green.

------
eponeponepon
Neat... I can see a use case for this in comparing pre- and post-final HTML
documents (though I don't relish the headaches involved in actually acquiring
both relevant sets of images at the same time out of our CMS).

Presumably it gets deeply murky when dealing with compressed jpegs?

~~~
scott_karana
Rather than use this, you can use a custom tool built for comparing websites,
for reasons similar to your use-case:

[http://responsivenews.co.uk/post/56884056177/wraith](http://responsivenews.co.uk/post/56884056177/wraith)

[http://bbc-news.github.io/wraith/index.html](http://bbc-
news.github.io/wraith/index.html)

~~~
Pelerin
Thanks for sharing this. I actually had this exact idea last year, but BBC
News implemented it better than I probably ever would have.

------
byron_fast
Not too far from it being a useful business. See: diff.io or diffbot.com.

------
bananaboy
Cool idea. Btw if you want a tool that does this, the free Perforce diff/merge
tool can diff images. It allows you to specify a tolerance for how different
as well.

~~~
todd3834
imagemagick also has `compare`. I wouldn't be surprised if Perforce uses that
under the hood

------
suyash
Very cleaver idea..UI automated tests can be a lot simpler.

------
linkydinkandyou
There's a 3.5" floppy disk on the tray of cookies on the right!

