Incorrect srcset for Media and Text Block

[rsmith4321]

Description

The image in the media and text block on takes up half the viewport width until the breakpoint, so shouldn't the srcset be something more like (max-width: 768px) 100vw, 50vw. At the moment it seems to load the full size image even though the image is only in a 50% width column. It should only be 100vw after the mobile breakpoint. Is there a function I could add to change this until it can be fixed?

Step-by-step reproduction instructions

Add media and text block.

Expected behaviour

Srcset should be 50vw until mobile breakpoint

Actual behaviour

Image is loaded at full size

Screenshots or screen recording (optional)

Code snippet (optional)

WordPress information

• WordPress version: 5.7
• Gutenberg version: Not Installed
• Are all plugins except Gutenberg deactivated? No
• Are you using a default theme (e.g. Twenty Twenty-One)? No

Device information

• Device:
• Operating system:
• Browser: Chrome

[Mamaduka]

Hi, @rsmith4321

The "Media and Text" block doesn't add the srcset attribute to the image. This is done by wp_image_add_srcset_and_sizes function before content is rendered.

Unfortunately, there's no way for that function to know how an image is positioned.

[skorasaurus]

This type of behavior is endemic to all of the WordPress blocks that have media inside of them.

The crux is that WordPress will generally load larger images (in terms of dimensions) than necessary even if there are other files that are more appropriate of the same image.

This has been discussed across several issues, most notably #6177 and I recapped what's needed at https://gist.github.com/skorasaurus/a01249d4302226bf12c80dd979322303 . You can follow along in #6177 to find its progress.

I understand, as a fellow developer and user, it's pretty frustrating that this hasn't been tackled yet by core developers.