2

enter image description here

Let's say I have an app that accepts images, and the user takes the above image. Now I want to upload it, and display a thumbnail of the image on my website. There are two ways I can have a thumbnail, either by scaling so that the entire image fits in the square:

enter image description here

OR the entire square is filled:

enter image description here

I was thinking about the second... However, I have concerns about how it cuts off the image and may be annoying to some users. At the same time, the first option makes the thumbnail look ugly (?).

Which type is preferred/standard and why?

  • FYI, Instagram chose to go with the latter. In their case, I think they made the right choice. – Austin Henley Jul 13 '14 at 17:17
  • What is the context of this and what will the images be of? People, landscapes, spoons? – Austin Henley Jul 13 '14 at 17:18
  • People and landscapes, not really spoons. Similar to Instagram, but I'm not sure if the latter is a good idea (cutting faces/landscapes). – Shahar Jul 13 '14 at 17:28
  • Can't you give them a crop preview, just like Instagram and Facebook? – Austin Henley Jul 13 '14 at 17:43
  • @AustinHenley There is an option to crop to a square but it's not mandatory, and in fact I'd imagine not many would use it. – Shahar Jul 13 '14 at 18:03
1

Since your context is people and landscapes I would go with the latter for the following reasons:

  • The letter-boxing is ugly (well, I think so), especially when a group of images is viewed as it takes away from their uniformity. Ugly or not it is certainly distracting.

  • For landscapes it will not particularly matter if part is cropped. It will still generally convey a summary of the image content.

  • For people, more often than not the subject is towards the center of the image rather than right on the edges, and more often than not they will not be cropped out. If you have the motivation and ability and if it becomes an issue you could run a rough face detection on the image and center the thumbnail on face locations as much as possible; but I would wait and see the types of images your users tend to upload first before determining if this is a problem.

Another option for the above is to allow users to choose the location of the crop; again if you have the motivation and ability.

Also just to reinforce your decision: A square is a good shape since you can probably expect to see a mix of landscape and portrait photos.

Keep in mind that most users are likely accustomed to some amount of poor cropping in thumbnails anyways, and are likely to be very forgiving even if your system is not perfect (this is not an excuse for slop, but you do have some flexibility). Landscapes are less prone to causing irritation than things with objects that tend to be viewed as a whole (such as faces or signs with text and boundaries), but again - assume that faces will often be relatively far from the edges then take a look at the images you are actually seeing to see if you need any special processing.

Also remember that the purpose of a thumbnail is just to give a quick overview of the information that the image conveys. It's OK to lose some in that context.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.