Gutenberg: Gallery images are not responsive

[trenzterra]

Issue Overview

There is no srcset attribute for images added via Gutenberg's gallery feature, unlike the images function.

Steps to Reproduce (for bugs)

1. Create a gallery in Gutenberg
2. Add images
3. Preview post

Expected Behavior

The SRCSET attribute should be enforced on gallery images allowing the thumbnails to appear.

Current Behavior

The full size image is shown for gallery images, wasting precious data transfer.

Possible Solution

Implement the srcset attribute similar to normal images.

Screenshots / Video

Related Issues and/or PRs

Todos

• [ ] Tests
• [ ] Documentation

[gravnetic]

All images are not scaling properly, or they are losing their aspect. This is a single image block, and I have confirmed gallery as well.

[ms-studio]

It's important to note that, since the introduction of galleries, the default inserted image size for galleries has been "thumbnail" (with the option to change it in the dropdown menu).

Also, a gallery shortcode with no "size" parameter has always resulted in the thumbnail being embedded on the frontend.

Currently, in Gutenberg, galleries are embedding the "full" image. This means that Gutenberg-galleries are pretty much unusable with high-resolution imagery. They will result in hugely bloated pages. In a test run I did with my design students, they created 100+ Mb pages with 10 - 20 images coming straight from their cameras.

[klihelp]

For the moment until the thumbnail size options built-in I have reverted back the gutenberg gallery code to the long-time tested [gallery] shortcode:
https://github.com/klihelp/kli_gutenberg_gallery

[mor10]

Based on my testing of Gutenberg 3.3, Galleries are still outputting the full size images. This causes a significant performance hit when the plugin is installed.

[mor10]

Adding srcset and sizes to individual gallery images is a start, but it does not fully resolve the issue of the browser loading the wrong image sizes for galleries. Right now the sizes attribute for each gallery image is set as if the displayed image width matches the content width which would only be correct if the gallery has a single column (so almost never). Further refinements need to be introduced (likely through #6177) to resolve this issue. IMO this issue is not resolved and should remain open.

[youknowriad]

Granted, we can do better but There's already #1450 for picking sizes for gallery images. Let's avoid duplicates. There's also the issue you point to. The current issue was specificly about the srcset attribute IMO.

[mor10]

Interestingly I've uncovered a severe bug in current WP around how the sizes attribute is handled when any other image size than thumbnail is chosen for galleries pre-Gutenberg. Will file a Trac ticket and watch to make sure it doesn't carry over into Gutenberg.