Making Smarter Thumbnails

I was recently tasked to improve the look and functionality of a site that lets users upload images. One of the area I looked into was how it handled automatic thumbnail generation, because I found the thumbnails that were being generated to be, well, plain ugly.

The method they used was a standard resize to max width and height. The uploaded photo is scaled down proportionately to fit into a box of specified width and height. This resulted in irregularly sized thumbnails and even more so when users upload photos with strange dimensions. Not only does it make the page look messy and disorganized, sometimes the scaled down images gives viewers little idea of what to expect in the original.

Wikipedia’s entry for thumbnails defines it as “reduced-size versions of pictures, used to help in recognizing and organizing them, serving the same role for images as a normal text index does for words.”

The ideal solution is probably to let users crop the images themselves, much like how facebook used to let you crop out an area of a photo for your profile pic, but the development of such tools didn’t fit the client’s schedule or budget, so I decided to put it on hold and implement a more automatic method for now.
I started by scanning through the huge collection of uploaded images on the server in search for (hopefully) a common pattern for the area of interest on each photo. At the end of the day I realized much of the bulk was full or half body shots, and more often than not the bottom half of the photo can be safely cropped away without affecting the resultant thumbnail’s ability to resemble the original photo. Furthur analysis

The ideal solution is probably to let users crop the images themselves, much like how facebook used to let you crop out an area of a photo for your profile pic, but the development of such tools didn’t fit the client’s schedule or budget, so I decided to put it on hold and implement a more automatic method for now.

I started by scanning through the huge collection of uploaded images on the server in search for (hopefully) a common pattern for the area of interest on each photo. At the end of the day I realized much of the bulk was full or half body shots, and more often than not the bottom half of the photo can be safely cropped away without affecting the resultant thumbnail’s ability to resemble the original photo. Furthur analysis determined that the outer 20% perimeter of the image also serve little purpose, they improve the composition of the whole image but they are seldom where the area of interest is.

Satisfied, I devised a cropping function that extracts the central 80% of the image (by area), and produced a fixed-size thumbnail that captures roughly 1/3 of the result. Compare the before/after below:

Before and after 1

Before and after 2

There are probably a thousand and one ways of making a thumbnail, and this is only a method I found that fits my needs. I do not claim that it is suitable for every use. User content is unpredictable and this is just a special case where they rougly conforms to a common pattern. The aim, however, should still be the same – to make thumbnails that are easily recognisable even where dimension is limited.

Leave a Reply

Your email address will not be published. Required fields are marked *