Make WordPress Core

Opened 3 years ago

Last modified 2 years ago

#52495 accepted defect (bug)

Hard cropped images do not crop specified dimension, causing lack of adaptive images

Reported by: larssg's profile larssg Owned by: joedolson's profile joedolson
Milestone: Future Release Priority: normal
Severity: normal Version: 5.6.1
Component: Media Keywords:
Focuses: Cc:


If an image is less than the size of a specified image size, it will be cropped only on the dimension that is greater than the specified dimension. The result is an image that is not the same aspect ratio as other images with specified image sizes that have the same aspect ratio. So it won't output those other images in an srcset and your site may be loading much larger images than needed for mobile.

For example, I might have defined image sizes of 1000x500, 750x375 and 500x250 and use those images in my theme. Normally, I'd insert that largest image and then the other two would be in an srcset. But, if I were to upload and 960x600 image, I'll get a 960x500 image, as well as the normal 750x375 and 500x250. Because these aren't the same aspect ratio, when I insert the larger image, there is no srcset. Now visitors are stuck loading the largest image.

It would make sense to me for hard crop to scale the image up to meet the minimum size for both dimensions, then crop.

Change History (5)

#1 @larssg
3 years ago

Alternately, if scaling up the image isn't desired, it could simply crop the image to the correct aspect ratio, respecting current sizes.

#2 @hellofromTonya
3 years ago

  • Component changed from General to Media

This ticket was mentioned in Slack in #core-media by joedolson. View the logs.

2 years ago

#4 @joedolson
2 years ago

  • Milestone changed from Awaiting Review to Future Release
  • Owner set to joedolson
  • Status changed from new to accepted

This definitely seems like something worth looking at. It'll require some careful thinking, since it involves changing something that WordPress has done for a long time, and there are probably people who have built workflows and site layouts based on the expectation that cropping does not respect aspect ratio. But with the advent of srcset in core, maintaining aspect ratio would definitely be valuable.

#5 @nosilver4u
2 years ago

@larssg It seems you might achieve better results if you disabled the 'crop' flag on those sizes, so that they all maintain the aspect ratio of the 960x600 image.
Do be careful of the word 'scale' as it typically implies the opposite of 'crop', which is the default WP behavior for registered sizes, excepting the 150x150 thumb.

However, I see what you're saying where you'd want WP to upscale the 960x600 image to 1000x625 so that it can then be cropped to 1000x500. In such a case, you'd get better quality results if you upload an original at 1000x600 vs. what WP can achieve via upscaling. Those upscaled images almost always look very poor quality, and is something I would avoid at all costs.
And if you don't have a larger original, it's likely best for you to upscale it ahead of time with PS or GIMP, as changing the current/default behavior would be a bit risky.

FYI, if the 'crop' flag were disabled on those sizes you described, a 960x600 upload would result in the following sizes: 800x500, 600x375, and 400x250, which will all work nicely for a responsive layout.

Note: See TracTickets for help on using tickets.