6 ms·
Image diffing using CSS
- eponeponepon 11y agoNeat... 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 11y agoThere 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/ https://addons.mozilla.org/en-US/firefox/addon/pixel-perfect...
- scott_karana 11y agoRather 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 11y agoThanks for sharing this. I actually had this exact idea last year, but BBC News implemented it better than I probably ever would have.
- alwayslearning 11y agoThanks for the links! Wraith looks really useful for my current project.
- smadge 11y agocss 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.
- eponeponepon 11y agoI'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 11y agoThis 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 11y agoI 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 11y agoDoes this method also work when I'm missing a semicolon somewhere between lines 35 and 994?
- todd3834 11y agoI 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 11y agoThat is totally awesome. Once you get the focus right, the changes just light up.
- byron_fast 11y agoNot too far from it being a useful business. See: diff.io or diffbot.com.
- bennettfeely 11y agoIf 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
- bananaboy 11y agoCool 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 11y agoimagemagick also has `compare`. I wouldn't be surprised if Perforce uses that under the hood
- BinRoo 11y agoWhat 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/
- linkydinkandyou 11y agoThere's a 3.5" floppy disk on the tray of cookies on the right!
- suyash 11y agoVery cleaver idea..UI automated tests can be a lot simpler.
- deleted 11y ago[deleted]
- jamesfisher 11y agoI 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.