[wp-trac] [WordPress Trac] #49966: Load smaller images when in a gallery

[WordPress Trac]

#49966: Load smaller images when in a gallery
--------------------------+-----------------------------
 Reporter:  noisysocks    |      Owner:  (none)
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  Media         |    Version:
 Severity:  normal        |   Keywords:
  Focuses:                |
--------------------------+-----------------------------
 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 ?

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/49966>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform