Handle responsive images

Question

I have a web page where the users can sell their houses. They can also upload multiple images to make a carousel to show the house's images. The problem I'm facing is to decide whether or not to use responsive image or just resize and keep proportion.

For example, the carousel container is 400px height and 100% width, so I have 2 scenarios:

• Image fills the container, but crop some parts of it;
• Image keep propotion until reaches 100% of height or width;

See these 2 images for example:

This example will fill the entire container.

This example will fill a maximum height or width and center the image.

Because I'm not the one who control the image upload (I can only ask for a min/max image size) I'm kind of confused on what approach to use.

Filling the entire container has a better result on the design, but if the user upload a very vertical image, for example, it will zoom in too much and lose it's focus. In the other hand, if filling only a maximum height/width, will leave a lot of blank space on the sides of the image.

Both situations has it's pros/cons but what should I take in consideration in this case?

Answer 1

Let the user see their whole image

As this is out of your control due to users uploading images, you will find people will be more frustrated with having their image cropped off than having some white space making your design feel messy.

I created a Gallery control at one point for a client and I used "overflow:hidden" to allow the image to fit in to MY space, cropping off the sides of the image where I needed to.

This created many issues as it was a responsive control, so on some resolutions and devices, more or less of the image would be cropped depending on the viewport of the user.

This was because people expected my gallery to crop their image, pick the focal point and make it sit perfect for them and pick the best possible way of displaying it, which was just not an option as every image is different.

To do that, I would have to have the user define the focal point of the image and position from there. But that was just so painful and people could not understand why I could not just show the whole image.

In the end going down your second route was the best option and no one has complained since.

This is an example of the finished gallery, I picked a nice subtle colour to fill the rest of the space

Desktop

Tablet

Mobile

Answer 2

This is a very common situation, and instead of considering it a problem, you can use it on your favor by providing the user with what is known as locus of control. In your case, you can have an overflow:hidden element just as in your first example, and then allow your users to zoom in/out and drag the image to see certain parts out of sight. This way, you put the use in control while adding a sense of dynamics and interactivity to your page

Answer 3

You must first and foremost take into consideration the goals of your users. Design for them, both the uploaders and the viewers.

The goal of using a website gallery for someone selling a house is to show the house in the best possible light via images.

The goal of a potential buyer viewing the gallery is to see as much detail as possible about their potential purchase.

In neither case should software crop the imagery permanently and automatically; nor should the designer decide that the aesthetics of their design trumps the goals of the users.

And, in small screen circumstances zoom should be available so an image can be expanded and details focused on.

Therefore:

• any cropping should be user defined, or at least give the option for the user to refine a computer generated crop.
• Any computer generated crop should try to get as much of the image in - we aren't looking for professional photography with carefully considered focal points, we're looking for detail.
• Crops should only be done for thumbnail summaries rather than for full screen galleries.
• any image uploaded to the site should be easy to view in full detail with no cropping - one click.

Answer 4

You also have tiling and stretch options like when you changing background image in Windows.

power your users

If you can give these options to user as presets; they can choose the best for the context. For vertical images, please check dragging possibilities like in Facebook top profile image and LinkedIn posts.

Answer 5

This type of tool can also be helpful : https://github.com/jwagner/smartcrop.js/

Basically it detects where the point of interest is in your image and does a "smart crop".