Sort and rank images

Sort and rank images

a screenshot of my first quick prototype in 2014

My interest in sorting images started a number of years ago when I was working in an architectural practice within a small team. We were working with a private client on the design of their main residence. One of the things we did in the early stage of the design process is to show the client a selected set of images to gain an idea about the kinds of space, the material and the feeling of space the client may like. I thought it may be an interesting idea to make something to help arrange a set of images in an order by simply choosing the preferred one between pairs of images.

Sort and Rank

I find the ideas of "sort" and "rank" relevent in conceptualising the arrangement of a set of entities into an order.

The idea of "rank" may be conceptually closer to the output with an emphasis on the order less about the way something is arranged. To say what comes first, second or third and where there may be ties. I also think about the concept in terms of scoring, like the early google 'page rank' is a way to score a particular webpage. The higher the score the closer to the number one position in the search result. It is also related to the idea of voting.

The idea "sort" may be conceptually closer to arrangement. It is common in computers, information and technology usually for numerical data, for example, to sort an array of numbers or like in a spreadsheet to sort a table in ascending or descending order for a specific column. There are many known algorithms for sorting. Sorting works by doing a pairwise comparison between two entities e.g. 9 > 5. If we take a set of images as entities, and conduct pairwise comparisons between them we end up with a sorted order. However, one of the problems of sorting images in a context where we choose from a pairwise comparison is that the number of times we have to make the comparison in order to get a sorted set of entities can be quite high. Let say we want to compare 5 items A,B,C,D,E. One way to conduct pairwise comparisons between the 5 items is to put them into pairs.

A B C D E
A x o o o o
B x o o o
C x o o
D x o
E x
pairwise comparison between A,B,C,D,E

Assume we do not need to compare the same entity i.e. A-A and by comparing A-B we also know something about B-A, the minimum number of comparison is 10. This number increases when the total number of inputs (N=5) increases. The total number of comparison here is $N\times(N-1)/2$, so for example if we have 20 items to start with (N=20) we will need to make 190 comparisons to completely sort the entities. If we are able to assume an additional condition if $A>B$ and $B>C$ then $A>C$, then it is possible to reduce the number of comparisons using algorithms like insertion sort or merge sort merge sort. For a set of 20 items, we can sort the set of items with only 5 to 14 comparisons. The previously mentioned prototype is basically about letting us evaluate and compare between two images at a time while minimising the number of comparisons required to put a set of images in order. That said, it is important to understand the limitation of this approach since it does require the additional assumption.

A little round up of what is out there

Over the past decade, there are many applications out there that have explored and operates on the idea of "sort" and "rank", that I found really interesting.

For example, rankthings.io presented as a quiz with a present set of items, which I believe use a pairwise relative scoring. Another quiz-like example is sorta.app, which uses mergesort with the result being a ordered list of items. It also lets users define their own quiz.

Another good example is Karen Lin's Ranker which takes a list of text items and present pairwise comparisons until the list is sorted.

More recently, "rank pairs" from MidJourney compares an image pair, the relative result between a pair probably helps to score images, to augment, and guide their image generation process. I believe this is about derive scores using relative comparison from multiple participants, and this is a different idea to what I am looking into at the moment.

Although my original intention is to look at how other people think about a set of images, I thought perhaps it is also useful for ourselves to find the best images from a set of good ones.

My question is: How can we make it so it works easily for a quick selection of the better images for our own use? What can we do to make a process that is adaptable to changes in the original set of images?

Image Selector

Screenshot of Image Selector in action

I want to be able to make an image collection, sort them as I go, add or remove images from the collection, and continue at a later date. I have spent a bit of time upgrading my quick prototype into a in-browser tool that is easy to use, easy to start a new image-sort collection with own photos and images.

In Image Selector, we can start a new image collection by drag and drop images from another browser window, from local files, or paste copied images. We can modify the collection anytime. When adding or removing items, the sort progress will be kept and the process automatically adjusts to the new images or removed images.

Of course this is one of the many ways to rank and sort images. There are many other angles and perspectives to be explored. What do you think?