Tiled Gallery block: images are served with Photon, but not resized

[ChrisBegley]

Steps to reproduce the issue

1. Add a Tiled Gallery with Gutenberg using large, hi-res images.
2. The images on the back end and front end aren't resized with Photon. They are loading in the large, full-sized images instead. This causes the browser to freeze up and leads to slow loading on the front end.

What I expected

Photon should have added the "w" and "h" attributes to load in smaller versions of the images. This works correctly when using Tiled Gallery and the Classic Editor.

What happened instead

Tiled Gallery (Gutenberg) loads in the full-sized images. This causes the browser to freeze on the back end and the images to load in slowly on the front end if the images are very large.

[jeherve]

Thanks for the report!

I'll move this issue to the wp-calypso repo, where the Tiled Gallery block is being developed.

For reference, here is how things look like for an image in a tiled gallery inserted via the classic block:

src="https://i0.wp.com/mysite.com/wp-content/uploads/2019/01/test.jpeg?zoom=2&w=423&h=282"

vs. an image in the tiled gallery block:

src="https://i1.wp.com/mysite.com/wp-content/uploads/2019/01/test.jpeg

It does not include any size parameters, and thus serve an uncached, full version of the image.

[sirreal]

Thanks for the report @ChrisBegley!

Indeed, this is a limitation of the current block and it's something we plan to improve in a future version. https://github.com/Automattic/wp-calypso/pull/29787 includes some rough ideas using a srcset.

The Mosaic and Column layouts will use full sized images that have their container sizes adjusted to fit the layout. This happens dynamically and adapts to the gallery's container size. We didn't want to refetch photon images on every resize, but an option might be to refetch images when some threshold is passed.

The Square and Circle layouts are adjusted using photon, their width and height are cropped to make a square image the size of the smallest dimension.

We'll be exploring how best to improve this sometime soon and I'd invite you to be a part of that conversation 🙂

[sirreal]

I'm working on an implementation that fixes this in Automattic/wp-calypso#30724, #11397

[jeherve]

This should now be fixed.