Compare Web Sites as Images Using Beyond Compare 3

I was having a discussion today with two of our web guys about how to easily compare similar (or identical) web pages in ways that a non-technical user would find useful.  Currently, our customers open the pages side by side and visually inspect them for differences.

I suggested taking a programmatic capture of each page and comparing the images.  Of course, the first question was “How would you do that?”  Being more of an idea person than actually knowing how to do anything useful, I just mentioned that is must be easy because so many website have hyperlinks that show thumbnail images of their target sites when you place your mouse over them (I really have no idea).

After spending some not-so-productive time with my friend Google, I decided that grabbing web sites as images was easier said than done.  However, while trying to figure the whole programmatic capture thing out, I did think of another easy way to compare two web sites that uses tools that we already have in-house.  Since I’m not a technically savvy kind of person, this technique should work well for anybody with access to an image compare tool (I used Beyond Compare 3 for this example).

To demonstrate, I’ll pick a web page to inspect for changes.  I like http://www.cropinsurancespecialists.com both because it’s clean and because the content “rotates.”  This allows me to take different screen shots without opening up another page.  First, open the page in a browser window and take a screenshot (Alt+PrtSc).  Paste the image into “Paint” and save the file.  I just used the default .bmp format.  Then, after the content rotates – for a second web site, you would just open that site here – take a screenshot and save it with the first image.

You can now open Beyond Compare 3 and do a “Picture Compare”:

 

Browse out to your previously saved images and select one for each side of the compare.  For this compare, I took two screen-shots of the cropinsurancespecialists.com website that were at the same stage of “rotation” 

As you can see in the first screen shot below, there is a small amount of difference in the IE tab section (not discernable to the eye), but the bodies of the pages are the same.  With a single glance at the compare screen, you can see these web pages are identical.  There is no going back and forth reading and visually comparing all the content on each site.

In the second screen shot, I compared one of the original page images with a second image that was in a different stage of “rotation”  As you can see, it not only shows large differences in the farm image, it also shows text differences very clearly, both actual copy changes and font changes, such as color.

 

Web page with no changes

 

 Web page with several changes (note how easy it is to identify text changes)

 

In about one minute I was able to go through three web sites, determine that two were identical and to identify the specific differences in the third.  All without complex tools that might hinder adoption.  I think this technique for comparing web sites will save our customers (and us!) money the very first time they use it.