Image diffing using CSS

http://franklinta.com/2014/11/30/image-diffing-using-css/

by ck2 • 11 years ago

488 22 11 years ago

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?

Domenic_S• 11 years ago

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...

scott_karana• 11 years ago

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

Pelerin• 11 years ago

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

alwayslearning• 11 years ago

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

smadge• 11 years ago

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.

eponeponepon2• 11 years ago

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.

Bognar• 11 years ago

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.

philsnow• 11 years ago

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.

tomphoolery• 11 years ago

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

loopdoend• 11 years ago

Use an IDE or a linter.

todd38342• 11 years ago

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!

zoloff1• 11 years ago

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

byron_fast• 11 years ago

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

bennettfeely• 11 years ago

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

bananaboy• 11 years ago

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.

todd38342• 11 years ago

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

BinRoo• 11 years ago

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/

linkydinkandyou• 11 years ago

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

suyash• 11 years ago

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

jamesfisher• 11 years ago

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.

Image diffing using CSS

Related Stories