Resize vs Crop

Question

Let's say you're creating an eBay-like site where users can list items they wish to sell to others and you want to allow them to upload pictures. In order to make the site look as "clean" as possible, you decide that all image thumbnails will render as 100x100 pixel squares on the main page (the full image could be displayed in another screen if required).

What's the best way to go about doing this? Should you simply resize the image to the specific dimensions and risk warping or crop the image and risk chopping off important parts of the image? Or just thumbnail it with the same aspect ratio and fill in the extra space with some default color?

Answer 1

You could do both.

You could provide a slider that resizes the image by a particular ratio, and also allow them to move around a clipping region that's the size of the resulting image you want.

Answer 2

I would say that the option to resize the the image to 100x100 with out regard for the aspect of the original image is and unacceptable solution. In my personal opinion the best option is to give the user a square selection tool, that allows them to drag and move a crop area over their uploaded image. Once they select the crop area you crop the image and resize it to 100x100 pixels. That will give you the cleanest presentation of thumbnail images. Since the image will link to a full size image at it's original aspect I would not worry that some of the image will be lost.

Answer 3

Assuming that you need a fallback solution for users who cannot or will not use a graphical cropping tool, I would suggest a list of operations for the user to pick from.

• letterboxing (show black bars, cut off nothing)
• crop to center
• crop to the [NE/NW/SE/SW] corner
• crop to the middle of the [N/E/S/W] side