Gutenberg: Gallery Block - Include resized images

Created on 12 Feb 2019  路  9Comments  路  Source: WordPress/gutenberg

I would expect that the images displayed through the gallery embed would be resized, in order to save bandwidth. I have a gallery with five 600px wide by 350px tall images in a 577px container. I do see that the sizes attribute has been added to them ("max-width: 600px) 100vw, 600px", however, the full 600px image is still the one being loaded, even though some of the images are being resized to only 181px with CSS.

I would expect this to display a smaller version, much like the function wp_get_attachment_image() does. This limits the use of the gallery block, especially on mobile devices where data is a larger consideration.

Needs Testing [Block] Gallery [Feature] Media

Most helpful comment

@youknowriad With WordPress 5.2, Gutenberg 6.1 and Twenty Ninteen, I get the following markup:

<li class="blocks-gallery-item">
    <figure>
        <a href="<url to to full size>" class="wp-image-3765">
            <img src="<url to large size>" alt="" data-id="3769">
        </a>
    </figure>
</li>

I see no srcset attribute.

All 9 comments

Seems like a duplicate of #13434

No, I don't mean custom image sizes. I mean, it should automatically scale the image down, even if "full" is selected, just like wp_get_attachment_image() does. The images are 600px by 350px, so I would think that smaller versions of them should exist normally, even without custom sizes, right?

I reopened to ensure people than knows more about "Media" can chime in.
In my tests, I do see the srcset with the different image sizes added.

@youknowriad With WordPress 5.2, Gutenberg 6.1 and Twenty Ninteen, I get the following markup:

<li class="blocks-gallery-item">
    <figure>
        <a href="<url to to full size>" class="wp-image-3765">
            <img src="<url to large size>" alt="" data-id="3769">
        </a>
    </figure>
</li>

I see no srcset attribute.

This is definitely a problem when user add like 20 images in 1080p or even 4k size to one gallery block, a thumbnail size for "src" and full size for link will be good.

All images should always get a full srcset, no matter what pixel-size was defined within the editor or what column layout was picked. This is not a bug, it鈥檚 missing functionality, making the Gutenberg gallery essentially useless for responsive websites.

Passing along a report of trouble using the gallery block seen in mobile support:

I am using photo galleries on The Experiential Studios site. If I use Blocks, it loads way slow. If I use Classic editor, the photos shuffle within the editor itself ("random order" unclicked). I need them to stay in the order I put them. Once it shuffle, it takes an hour to put them back in the correct order. Please help!

(internal reference: 2281705-zen)

The problem with the Classic editor sounds like the issue at https://github.com/Automattic/wp-calypso/issues/14843 h/t @rachelmcr and the problem with the gallery block loading too slowly sounds like this issue.

This is confirmed and can have the needs testing label removed;

It's a duplicate of https://github.com/WordPress/gutenberg/issues/9620

(This is ultimately a duplicate of #6177:

Although a theme may properly create multiple images that are smaller;
the gallery block will not use them )

Was this page helpful?
0 / 5 - 0 ratings