User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I have a set of different sized images of products that I want to display on my web page with four to a row. The issue is that because they are different sizes, I don't know how to display them without them all coming out very "off".

Below is an example of a situation where it just looks weird:

Weird situation

I don't know the best way to position these images so they don't look "weird". Again, I know this is kind of vague, but perhaps someone has had experience with this? How do other shopping sites deal with this issue?

share|improve this question

migrated from May 1 '12 at 22:18

This question came from our site for professional and enthusiast programmers.

Well there's Pinterest's interesting way of staggering items, but it might look a bit off in a shopping context. – Ben Brocka May 1 '12 at 22:26
I agree. Salmon colored shorts look weird. – DA01 May 2 '12 at 4:11
If possible, remove the background grey, set the img height to be constant, and specify a max-width while centering the image in the 'box', which I think should then all combine to give a uniform experience? – Roger Attrill May 2 '12 at 8:47

Manual cropping to a standard viewport size is a better way to handle image galleries. Jacob Neilson recommends relevance enhanced image reduction to make tiny images more relevant (#4). This does mean a lot of work however, but for product galleries the quality of your images will directly affect the success rate of click throughs to purchase. For $100, you can buy the report with exact recommendations on product images, backed up by testing.

An excellent example in the wild? Zappos. Notice how the gallery I linked includes a variety of different clothes, all zoomed and cropped from what certainly started as a fully body shot to specifically identify and highlight the piece of clothing in question, all to a standard size.

The TL/DR? Use cropping and zooming to standardize the image sizes and focus on relevant details.

share|improve this answer

This is really a graphic design question more than user experience.

I think the challenge is source files. Ideally, you'd have the original photography which is typically (provided it was professionally shot) framed over-sized as the intention is that it will be cropped.

If you have that, you can then crop every image to the same aspect ratio.

However, I'm guessing you don't have the original photography. As such, I'm not sure there's a whole lot you can do.

One thought is to make a non-symmetrical layout. For instance, almost-square images could be cropped square and take up two columns. Tall images could be left as one column. Example:

+----------------+ +-----+ +-----+
|                | |     | |     |
|                | |     | |     |
|                | |     | |     |
|                | |     | |     |
|                | |     | |     |
|                | |     | |     |
+----------------+ +-----+ +-----+
share|improve this answer

Ideally the images should be cropped as others here have suggested.

However, if that is not an option, You can use an equal-sized rectangular frame behind each image. Then depending on the orientation, the images are scaled to fit horizontally or vertically. But they should always be centered.


download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.