What is the best way of handling image uploads

Question

I am working on a new project built on Bootstrap 3 and ASP.Net MVC 5. The layout of a project is heavily dependent on image entities (e.g. paintings). Like so:

So registered users would create new Entities, and these would appear on the site's homepage. So next submitted would appear under the grey and to the right of the turquoise block.

Because of the above, I require uploaded images to be of a specific size. 500px by 350px.

Now I know what I should NOT do. I should not restrict my application to only accept image uploads of the given dimensions. Many people that might want to submit, might not have Photoshop or similiar to edit / crop / resize the image to my required specification.

So what should I do? I'm facing a dilemma. If I accept small images, and resize them in code, then they might look grainy and make my site quality drop. On the other hand if I only accept resolutions above a certain X,Y and crop those in code to what I need, then I might lose a lot of users.

I hope you UX experts can provide me with some solid advice to follow in my application.

Answer 1

A few thoughts:

Given the layout you provide, 500x530 seems much bigger than would be needed. Something closer to 300x210 would seem more appropriate. For very wide browsers, you could always go more than 4 across and cap the image size at 300px wide.

With regard to image size requirements, I see a few possibilities:

1. Don't require a specific size, but do require minimum height and width. This avoids the "graininess" concern. Then you can resize and crop programmatically to fit as much of the image as possible into the dimensions you require.

2. Alternatively, for images smaller than your required sizes, don't size them up. Keep them at the size provided, but drop them on some kind of field (a subtle background color, say) of the required size.

3. This requires some work, but once the image is uploaded you could allow the the user to crop the image themselves in a tool that enforces the constraints you're placing on them with regard to aspect ratio and minimum size. In this case, if the image were smaller than your required dimensions, you'd provide them with a sort of "preview" of option 2 above, in that the image would be floating in a field of the required dimensions and they would be unable to crop it.

if I only accept resolutions above a certain X,Y and crop those in code to what I need, then I might lose a lot of users.

Barring some means of making smaller images work with your layout (e.g. option 2 above), it seems to me you'd be losing only those users whose images would be making your site look janky, which seems to be a show-stopper for you. For a site with a focus on visuals, a minimum image size seems like a totally valid requirement to me.

Answer 2

I believe I had a project that had a similar requirement. I think what I did was require a minimum WIDTH/HEIGHT in this case 350px by 500px and I set a max so people didn't upload crazy sizes (5mb for example)

Then I used CSS and set the max-width and max-height on the image to make it stay within the proportions I required.

Kind of like this: https://jsfiddle.net/qexs4f6s/

Answer 3

I think the best thing that you could do is make an upload button easily visible, and then make the button redirect to the upload page, where a file chooser opens up, revealing the user's files, with an image filter (.PNG, .jpg/.jpeg, .BMP, .gig, etc). After the user chooses the file, start a streamed upload, uploading the file progressively, byte by byte, to not crash the server or site, and then enforce a site-leave blocker, that opens a popup before the user leaves the page.

This will allow for a smooth upload experience, and will be friendly to users of all levels of skill with computers.