Twenty Twenty-Two: Header image missing dimension attributes

[flixos90]

The prominent bird image used in Twenty Twenty-Two does not have dimension attributes width and height set, which is problematic for ​CLS performance. WordPress core automatically fills width and height for any attachment images, but since this one comes from the theme itself, this is not supported.

The lack of those dimension attributes lead to further performance problems for load time performance (LCP), since loading optimization attributes like fetchpriority="high" cannot reasonably be applied to images without dimension attributes.

To provide a good starting point, the theme should be updated so that the image provides dimension attributes.

This bug was discovered while reviewing the issues reported in #58770.

Trac ticket: https://core.trac.wordpress.org/ticket/59256

[flixos90]

Testing instructions

1. Activate Twenty Twenty-Two on a fresh install.
2. Visit the home page and inspect the header image element (the image of the bird). Note that it has neither loading="lazy" nor fetchpriority="high" present, due to furthermore lacking the width and height attributes.
3. Apply the PR ​https://github.com/WordPress/wordpress-develop/pull/5124 to your site.
4. Refresh the home page and inspect the image again. Now it should have width and height attributes present, which also allows it to receive loading="lazy" or fetchpriority="high" through WordPress core's image optimization logic. On a fresh install, the image should have fetchpriority="high" applied, since it's the largest image in the header.

@kt-12 I just realized you had already opened a somewhat similar PR in #4864. I think yours covers more images, but doesn't consider block validity, which is likely going to lead to errors in the block editor.

We can proceed with either PR, but let's make sure to align on one cohesive approach. Also please note the new dedicated ticket I opened for this in https://core.trac.wordpress.org/ticket/59256.

Hello @felixarntz,

I noticed that TT2 includes some additional patterns with images in the following locations:

1. /twentytwentytwo/inc/patterns/general-two-images-text.php
2. /twentytwentytwo/inc/patterns/general-wide-image-intro-buttons.php
3. /twentytwentytwo/inc/patterns/header-large-dark.php
4. /twentytwentytwo/inc/patterns/header-small-dark.php

The question is whether we need to add the "height" and "width" attributes to these images?

@felixarntz If I am not wrong, by block validity you mean that json matches the attribute value, right?
We can go ahead an more other images to this PR, effort of finding the width and height can be reduced by using values from my old pr directly.

I don't think that block validation is going to be a problem. I say update all the other images.

@spacedmonkey I have now covered the two remaining instances. From your previous comment, some of them I had actually already implemented in this PR, and some of them are not using the core/image block. It's not as trivial to handle the dimensions for the other blocks, and core/image is most critical because of where it is used in the theme, so I think to not increase the scope too much we should only focus on all the core/image blocks here.

Please take another look.

[spacedmonkey]

Marking as ready to commit.

[flixos90]

In 56613:

Bundled Theme: Add missing dimension attributes to images in Twenty Twenty-Two patterns.

The dimension attributes width and height should be present on every image in order to avoid layout shifts and be able to leverage WordPress core's image loading optimization functionality.

This changeset adds dimension attributes to the core/image blocks used in block patterns in Twenty Twenty-Two, where this is particularly critical as WordPress core cannot backfill the attributes for those images, as their sources are not part of the Media Library.

Props spacedmonkey, thekt12, mukesh27, flixos90.
Fixes #59256.

Committed in https://core.trac.wordpress.org/changeset/56613