Image diffing using CSS | Hacker News Reader

Image diffing using CSS

franklinta.com

488 pointsck222 comments

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

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.

I had never thought of that... amazing how easily the eyes track the overlapped image if you move your head forward and backwards.. I have to stay exactly on the plane splitting the two images or else the illusion breaks immediately.

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

Use an IDE or a linter.

Or git diff

I thought this was a joke, it takes a moment to get the focus right but suddenly all of the differences appear. Thanks for sharing your childhood hack!

That is totally awesome. Once you get the focus right, the changes just light up.

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/

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.

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?

There was a web dev addon that would take your comp images and overlay them while you were firebugging a pixel-perfect layout. I found it highly useful early in my career.

Edit: found it https://addons.mozilla.org/en-US/firefox/addon/pixel-perfect...

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://bbc-news.github.io/wraith/index.html

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

Thanks for the links! Wraith looks really useful for my current project.

css filters work on any element, not just images. Maybe you could overlay two absolutely positioned documents on top of each other for a visual diff.

I've actually done that with text before - in particular, ensuring that links in a document had the same URL in their text content as in their href - by making one red and one green (and putting them in a monospace font for good measure), you can see straight away when they don't match.

I went with red and green because I intended to try using 3d glasses, but as it turned out, 'vaguely pinkish' was enough to see a match without actually looking.

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

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.

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

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

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

Reply on news.ycombinator.com