Authentically Human! Not Written by AI!
All Content Copyright © Michael Chesley Johnson AIS PSA MPAC

Wednesday, January 11, 2017

Relative Sizes of Images on Your Website


As I go through the process of designing my new website, I ask a couple of colleagues whose opinion I value for input.  One concern that came up recently has to do with relative image size.  One draft of my new site had painting images "hard-cropped" to a square format.  Such a grid has a clean, contemporary look to it, and I've seen many artist websites displaying their art this way.  However, because the crop is automatic and you have no control over what you crop out, it can dramatically change the painting's design.  What's more, the uniform squares give you no indication of a painting's true proportions.  My colleagues emphatically did not like this approach.  (Of course, you can always click on the thumbnail and get the large, uncropped version.) Here's how it looked:


My second option was a "soft crop," in which the longest dimension of the image is retained.  This way, both a painting's design and proportions are preserved.  Because this gives you a much better idea of how any individual painting looks, I've chosen to use this approach.  Here's how it looks:



But there's still a problem, a rather major one in my opinion, and I haven't seen it discussed in any of the literature.  Because you are reducing an image to fit a pre-defined box that is applied to all images, a painting that is 12" wide will look just as wide as one 24" wide.  This is not a problem if you are making square paintings, but it is a problem if you are trying to view 12x24 paintings next to 9x12s—as you can see in the above image.

Ideally, each image should be sized so it follows the same scale as its neighbor.  A 12x24 should look like it covers more real estate than a 9x12.  In the example below, I've chosen a rule of 12" = 400 pixels.   The 12x24 is 400x800 pixels; the 9x12 is 300x400 pixels.  They look just like they might on your wall (except for the orientation of the second painting.)  Here's an illustration:


Other than hand-tweaking every single image, I know of no way of doing this automatically.  In every image editor I've seen, you can either scale all images as a percentage or to fit a box of pre-defined dimensions (e.g. 400 pixels x 800 pixels.)  What's more, the web design software also has to be able to handle this solution and not impose its own. If anyone has a solution, I'd love to hear it!