Load smaller images when in a gallery

[noisysocks]

Originally reported in ​https://github.com/WordPress/gutenberg/issues/9620. Since sizes is set by wp_calculate_image_sizes, this issue belongs in Core Trac.

---

I noticed that when creating a gallery block, with the 3 default columns, the images used as thumbnails on the front end are the original, full size version. Not the thumbnail, not medium, not even large size version. There is the srcset attribute but that does not help much because 100vw is set so it will generally only affect screen sizes smaller than the Large or Medium sizes set on WordPress Settings > Media.

Let's take for a theme that uses a maximum content width of 700px. On Settings > Media the sizes Thumbnail 150px - Medium 300px - Large 1024px are set.

Images in the Media Library are all 1600px wide. Now take a gallery with three columns, which will have a source code like this for each image:
<img src="http://localhost/wp-content/uploads/2011/07/img_8399.jpg" alt="Boat Barco Texture" data-id="771" data-link="http://localhost/2010/09/post-format-gallery/img_8399/" class="wp-image-771" srcset="http://localhost/wp-content/uploads/2011/07/img_8399.jpg 1600w, http://localhost/wp-content/uploads/2011/07/img_8399-300x200.jpg 300w, http://localhost/wp-content/uploads/2011/07/img_8399-1024x682.jpg 1024w" sizes="(max-width: 1600px) 100vw, 1600px">

Now visit that page on a browser with a screen width of around 1390px. The content width will be 700px which means a max width for each thumbnail of around 220px (due to margins between the images). A source size of 300px would suffice for normal 1x screen resolutions but instead the full 1600px size sources are fetched for each image by the browser.

When instead of sizes="(max-width: 1600px) 100vw, 1600px something more in correspondance with the gallery column size could be set to address this. Like sizes="(max-width: 1600px) 30vw, 1600px" so that a 30% image slot is assumed.

This leaves 50vw for two column galleries, and 100vw for 1 column galleries...

Thoughts ?

[peterwilsoncc]

Related (potential duplicate, can't decide) #45407

[RavanH]

Replying to peterwilsoncc:

Related (potential duplicate, can't decide) #45407

Not a duplicate but it certainly seems related.

There, under proposed solution I read: "Modify the wp_calculate_image_sizes filter to include a new fifth parameter $block_attr containing an array which includes [align] which holds the alignment value for the containing block." ... Such an array might also be useful to include block info like "gallery-columns" which could then be used to calculate more accurate "vw" values.