Forum

Thread tagged as: Problem, Suggestions

Image cropping

It is well known that perch doesn't upscale images. I can live with that (although I'm not a fan; a valid use case for upscaling would be https://www.filamentgroup.com/lab/compressive-images.html).

The problem we're currently facing is that not only scaling, but also cropping fails silently when the provided image is too small. So we get a lot of misproportioned imagery on the site, breaking the layout. As images used on the web get larger (we use a srcset with 1200, 800 and around 500px), this happens often. We have to correct that either manually or with object-fit.

So the difference to what happens when perch fails silently to upSCALE only is that it hurts more when it does so for cropping.

I would like to suggest those three variants for your consideration:

  • Allow upscaling for cropping (as it hurts more when it fails)
  • OR an "enable the upscaling although it's bad practice" setting

  • OR Display a warning / fail loudly when an image cropping couldn't be carried out

Urs Bräm

Urs Bräm 1 points

  • 5 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

I think this is mostly a problem when the uploaded image has a wildly different aspect ration than the stated crop. Is that right?

Not only:

<perch:content bucket="portraitImages" type="image" id="portraitImage" width="1200" height="541" crop="true" disable-asset-panel="false" />

fails with a (wildly different) 1100x1100 square, but not with a 1400x1400 square.

With a more similar 1100x600 rectangle something else happens: /perch/resources/portraitImages/similar-w1200h541.jpg is created, but its actual measure 991x541px only

So that led me to believe that you can't crop when the source data is too small

Drew McLellan

Drew McLellan 2638 points
Perch Support

What would you expect to happen for the 1100x600 image?

I understand; the behaviour for the 1100x600 image is a fallback, which keeps the desired ratio. That's fine!

So what remains are the images with smaller sizes and wildly different proportions. I'd love those to behave like the 1100x600 image

Drew McLellan

Drew McLellan 2638 points
Perch Support

We'll give it some thought.

Thanks!

Simon Clay

Simon Clay 127 points

I was thinking the same a week ago: When Perch chooses not to upscale, the layout often looks worse than if it had.

I seem to face this issue quite often, and with some clients, I can't relay on them creating images at a set aspect ratio, prior to uploading. The cropping is the main problem as it can lead to broken layouts. Responsive images also becomes semi-redundant when several assets are created based on the same width and height (but perhaps we have to live with this if uploaded images aren't large enough).

The crop is certainly an issue I am facing today with a build.

So +1 for my vote on this.

Thanks.

I wondered if another approach for cropping would be rather than setting both a width and height and then the system cropping the image based on whichever is largest. You actually set a width OR a height and an aspect ratio that the crop works to. I am not sure how viable this is, but something that crossed my mind when thinking about this issue.

To go through existing images, I'm trying the following on OS X:

brew install imagemagick # cf https://brew.sh
mogrify *-w1200h541.jpg -resize '1200<' -gravity center -crop 1200x541+0+0 +repage *.jpg

mogrify is an imagemagick command and basically the same as convert, but modifies the image instead of creating a new file.

A filename could be myimage-w1200h541.jpg, and Perch could or could not have cropped it – but the file name will always be the right one: It's supposed to be 1200x541px

If the image is less than 1200px wide, upscale (sorry...) and center-crop it.

A better solution would be with a little script

  • For each image
  • Check if the target image has the right dimensions
  • If so, do nothing
  • If not, convert the original with "-gravity center -crop 1200x541+0+0 +repage *.jpg"