System for computationally quantifying similarities between images
View Patent ↗Systems and methods provide for quantifying the similarity between images that appear similar. Given a set of images, one image is selected as the base image, to which the remaining images are compared. One or more portions of the base image are selected for comparison and the color composition of these areas is calculated. Then, the color compositions are examined to quantify the similarity or difference between the images, which is assigned a score reflective of the quantitative similarity or difference. The results are displayed. These systems and methods allow, e.g, a website owner to check whether web pages have come through imperfectly across different browsers; the analysis identifies not just blatant errors, but even single-pixel shifts.
1. A computer-implemented method for comparing similarity between images, comprising:
receiving, at a first computer, a base image and a selected portion of the base image as a basis for image comparison, the base image corresponding to a web page as rendered by a first browser;
receiving, at the first computer, at least one analysis image, the at least one analysis image corresponding to the web page as rendered by at least a second browser different from the first browser;
determining a portion of the at least one analysis image corresponding to the selected portion of the base image;
determining color information for the selected portion of the base image and for the corresponding portion of the at least one analysis image;
determining a color score by comparing the color information of the selected portion of the base image to the color information of the corresponding portion of the at least one analysis image; and
determining, at the first computer, a similarity between the base image and the at least one analysis image based on the color score, the similarity reflecting a degree to which the base image and the at least one analysis image are identical.
2. The method of claim 1 , wherein the base image and the at least one analysis image correspond to the web page as rendered by different devices.
3. The method of claim 1 , further comprising receiving coordinates corresponding to selection of the selected portion.
4. The method of claim 1 , wherein the base image is the web page and the selected portion is the entire web page.
5. The method of claim 1 , wherein the base image is the web page and the selected portion excludes a section of the web page.
6. The method of claim 1 , wherein the at least one analysis image received comprises multiple analysis images, and the color information is compared between the base image and each of the multiple analysis images to determine the similarity between the base image and each of the multiple analysis images.
7. The method of claim 1 , wherein determining color information further comprises:
quantifying a color in the selected portion of the base image; and
quantifying the color in the corresponding portion of the at least one analysis image;
wherein comparing color information further comprises comparing the quantified color in the selected portion of the base image to the quantified color in the corresponding portion of the at least one analysis image; and
wherein determining the similarity between the base image and the at least one analysis image comprises determining a similarity score based on the similarity between the quantified color in the selected portion of the base image and the quantified color in the corresponding portion of the at least one analysis image.
8. The method of claim 7 , wherein quantifying the color in the selected portion and in the corresponding portion comprises determining a number of pixels of the color in the selected portion and in the corresponding portion.
9. The method of claim 7 , wherein determining the similarity score further comprises:
determining a portion score for the portion based on the similarity between the quantified color in the selected portion of the base image and the quantified color in the corresponding portion of the at least one analysis image; and
dividing the portion score by a total size of the selected portion.
10. The method of claim 1 , wherein determining the color information further comprises:
quantifying the color in the selected portion of the base image; and
quantifying the color in the corresponding portion of the at least one analysis image;
wherein comparing the color information further comprises:
taking a first hash of the quantified color in the selected portion of the base image; and
taking a second hash of the quantified color in the corresponding portion of the at least one analysis image; and
wherein determining the similarity between the base image and the at least one analysis image further comprises:
comparing the first and second hashes to determine whether the quantified colors in the selected portion of the base image and the corresponding portion of the at least one analysis image are identical;
in response to a determination that the quantified colors are identical, assigning a highest similarity score; and
in response to a determination that the quantified colors are not identical, determining a similarity score for the quantities.
11. The method of claim 1 , further comprising storing the similarity between the base image and the at least one analysis image.
12. The method of claim 1 , further comprising displaying the similarity between the base image and the at least one analysis image based on the comparison as a similarity score associated with each of the at least one analysis images.
13. The method of claim 12 , further comprising:
displaying a control to select a threshold similarity; and
updating the displaying to show a subset of the each of the at least one analysis images with scores greater than the threshold similarity.
14. The method of claim 13 , wherein the control selects a lower threshold similarity, further comprising:
displaying a second control to select an upper threshold similarity;
wherein updating the displaying provides a visual indication of scores above the upper threshold similarity, below the lower threshold similarity, and between the lower and upper threshold similarities.
15. The method of claim 1 , wherein determining the similarity between the base image and the at least one analysis image based on the comparison further comprises:
determining a difference score representing a difference between the color information of the selected portion of the base image to the color information of the corresponding portion of the at least one analysis image; and
establishing the similarity by assigning the lowest difference score the highest similarity.
16. The method of claim 1 , wherein the first browser and the at least second browser render the web page on a single device.
17. A nontransitory computer-readable storage medium having computer program instructions embodied therein for comparing similarity between images, comprising:
an image module configured for receiving a base image and a selected portion of the base image as a basis for image comparison, and for receiving at least one analysis image and determining a portion of the at least one analysis image corresponding to the selected portion of the base image, the base image corresponding to a web page as rendered by a first browser and the at least one analysis image corresponding to the web page as rendered by at least a second browser different from the first browser;
a color information module configured for determining color information for the selected portion and for the corresponding portion of the at least one analysis image; and
a comparison module configured for comparing the color information of the selected portion of the base image to the color information of the corresponding portion of the at least one analysis image to determine a color score and determining a similarity between the base image and the at least one analysis image based on the color score, the similarity reflecting a degree to which the base image and the at least one analysis image are identical.
18. The nontransitory computer-readable storage medium of claim 17 , wherein the base image and the at least one analysis image correspond to the web page as rendered by different devices.
19. The nontransitory computer-readable storage medium of claim 17 , wherein the base image is a web page and the selected portion excludes a section of the web page.
20. The nontransitory computer-readable storage medium of claim 17 , wherein:
the color information module is further configured for determining a number of pixels of a color in the selected portion of the base image and determining a number of pixels of the color in the corresponding portion of the at least one analysis image;
wherein the comparison module is further configured for comparing the number of pixels of the color in the selected portion of the base image to the number of pixels of the color in the corresponding portion of the at least one analysis image; and
further comprising a scoring module configured for determining a similarity score based on the similarity between the number of pixels of the color in the selected portion of the base image and the number of pixels of the color in the corresponding portion of the at least one analysis image.
21. A system for comparing similarity between a selected portion of a base image and a corresponding portion of at least one analysis image, comprising:
means for determining color information for the selected portion and for the corresponding portion of the at least one analysis image, the base image corresponding to a web page as rendered by a first browser and the at least one analysis image corresponding to the web page as rendered by at least a second browser different from the first browser;
means for comparing the color information of the selected portion of the base image to the color information of the corresponding portion of the at least one analysis image; and
means for determining a similarity score between the base image and the at least one analysis image based on the comparing, the similarity score reflecting a degree to which the base image and the at least one analysis image are identical.
22. The system of claim 21 , wherein the base image and the at least one analysis image correspond to the web page as rendered by different devices.
23. The system of claim 21 , wherein the base image is a web page and the selected portion excludes a section of the web page.
24. The system of claim 21 , wherein the color information for the selected portion comprises a number of pixels of the color in the selected portion in the base image and the color information for the corresponding portion comprises a number of pixels of the color in the corresponding portion of the at least one analysis image; and
wherein the means for determining a similarity score comprises comparing the similarity between the number of pixels of the color in the selected portion of the base image and the number of pixels of the color in the corresponding portion of the at least one analysis image.
25. A nontransitory computer-readable medium storing a computer program executable by a processor, the computer program producing a user interface of an image comparison system, the user interface comprising:
a base image display area for displaying a base image corresponding to a web page as rendered by a first browser;
an analysis image display area, visually distinguished from and concurrently displayed with the base image display area, for displaying at least one analysis image and a score associated with each of the at least one analysis images, the at least one analysis image corresponding to the web page as rendered by at least a second browser different from the first browser; and
a similarity range display area, visually distinguished from and concurrently displayed with the base image and analysis image display areas, for displaying similarity information corresponding to similarity between the base image and the at least one analysis image, the similarity reflecting a degree to which the base image and the at least one analysis image are identical.
26. The nontransitory computer-readable medium of claim 25 , wherein the similarity range display area further comprises a similarity scale displaying a control for selection of a threshold similarity for display of the at least one analysis image.
27. The nontransitory computer-readable medium of claim 26 , further comprising, in response to input adjusting the control for selection of the threshold similarity, adjusting the at least one analysis images displayed.
28. The nontransitory computer-readable medium of claim 26 , wherein the similarity scale displays levels of similarity between the base image and the at least one analysis image.
29. The nontransitory computer-readable medium of claim 25 , further comprising a control for designating the base image and for selecting at least one portion of the base image for comparison to the at least one analysis image.