Using theme images in patterns and other building blocks

[sgomes]

Hey folks! 👋

I wanted to bring your attention to a potential performance problem with certain aspects of the theme, as it is currently implemented.

Background

When an image block is added in the editor, the HTML that is generated is something along the lines of:

<figure class="wp-block-image size-full"><img src="[URL GOES HERE]" alt="" class="[CLASSES GO HERE]"/></figure>

This is a very simple image tag that is missing some important best practices in the form of added attributes:

• A srcset with multiple sources for the browser to choose from, to ensure that bytes aren't wasted downloading excessively large variants.
• A loading tag with the lazy value for images which we expect to be below the fold or otherwise not the centre of attention, so that the browser can prioritise downloading important resources first.
• A width and height, so that together with the CSS, the browser can calculate and reserve the space for the image ahead of time, in order to avoid layout shifts.

For content (attachment) images, this is all added by WordPress when serving. However, that's not the case for theme images, which are served verbatim, without any of the aforementioned attributes.

The issue

Currently, the theme defines several "recipes" (can't think of a better generic name), such as patterns, that make use of theme images. Whenever these patterns get used, their images will fail the best practices above. This means potentially introducing performance issues (delaying page load), as well as user experience issues (layout shifts).

Furthermore, unless the user replaces these images with attachment images, they have no way of getting around the issues; the site editor offers no mechanism for fixing these problems, since it hasn't been designed to. The layer that is supposed to handle these problems isn't the editor, but rather WordPress, during serving, and it is unable to do so with theme images.

Potential solutions

I'm not entirely sure what the best way of going about fixing this issue might be.

Perhaps instead of using theme images in patterns and other "recipes", we could instead use some form of placeholder?

If that's not an option, perhaps we should consult with some site editor experts to explore options as block themes become both more popular and more complex.

Thanks for taking a look!

[MaggieCabrera]

Thanks for opening this issue! I'm concerned that this is an issue that not only applies to TT4 and any other block theme out there, but also to the entirety of the block pattern directory, so we definitely should find a global solution for this

[scruffian]

Yeah I agree this is a general issue with the editor. I have raised an issue for it here: WordPress/gutenberg#54185

[richtabor]

Perhaps instead of using theme images in patterns and other "recipes", we could instead use some form of placeholder?

We can certainly try this, now that WordPress/gutenberg#54216 has merged.