Disable sizes=”auto” for galleries with cropped images

[captain.crash]

WordPress added ​Auto Sizes for Lazy Loaded Images in WordPress 6.7.

In Galleries that use the setting "Crop images to fit" the images often overlap the box they need to cover by quite a bit (especially when Editors use landscape images in portrait boxes).

Browser heuristics don't seem to be considering the overlapping when calculating which image file to fetch for the layout box.

The result is quite often blurry images in such Galleries.

I'd therefore suggest to remove the "auto" keyword from the sizes attribute of images inside Galleries with the setting "Crop images to fit" enabled (or maybe, instead, when the image orientation does not match that of the layout box).

[westonruter]

@captaincrash Thanks for the report. Can you please provide an example of a specific Gallery block with specific image that causes the issue? Or better, provide specific steps for how to reproduce the issue and which browsers/devices that you're seeing the issue in.

[captain.crash]

Steps to reproduce:

I noticed the issue basically in all modern browsers on machines with a device pixel ratio of 1:1.

Please note, the "auto" keyword is only added to lazy loaded images, so putting the gallery below the fold and after two or three (other) images is crucial.

1. Insert a Gallery block with 3 columns and the setting "Crop images to fit" active.
2. Add two portrait images (say 2:3) and one landscape image (say 16:9) to the gallery.
3. Preview and verify the images have loading="lazy" and the "auto" keyword in the sizes attribute. Add images before the gallery until they do.
4. The landscape image is blurry. It needs to cover a portrait box due to the other images. Horizontally, much of the image can't be seen (object-fit: cover). To stay crisp, an image is needed that is much wider than the width of its box.
5. Open DevTools and remove the "auto" keyword from the sizes attribute, immediately a larger image is loaded that appears crisp. OR: Open DevTools and change the DPR to 2 or higher, which also instantly causes a larger image to be fetched, obviously.

In hindsight, this might be the case for single lazy loaded images as well, when their intrinsic aspect ratio and how they should be layed out are conflicting.