Image optimizations fail to apply when using Timber

[westonruter]

A user ​reported hero images were getting loading=lazy on their site. After inquiring, I found they were using Timber for templating. It makes sense that the logic in wp_get_loading_optimization_attributes() wouldn't work properly in this case since it is tightly bound to WordPress's templating system(s). This may actually be an issue better fixed in Timber itself, but ideally WordPress core should be able to do the right thing with alternate templating systems (or even complex templates written in the WordPress way). Ultimately, this may require the use of output buffering and HTML Tag Processor as ​proposed for a module in the Performance Lab plugin. See #59331 for adding output buffering for template renders with a filter for post-processing.

Here's how to reproduce the issue with Timber:

1. Install and activate the ​Timber plugin from WordPress.org.
2. Install and activate the ​Timber Starter Theme from GitHub (i.e. download the ZIP).
3. Add a new post with an initial large image or a featured image.
4. See the image has loading=lazy and is missing fetchpriority=high on the frontend.

Initial image block:

<figure class="wp-block-image">
  <img
    decoding="async"
    loading="lazy"
    width="1300"
    height="1300"
    src="https://example.org/wp-content/uploads/2023/09/image.jpeg"
    alt=""
    class="wp-image-8"
    srcset="
      https://example.org/wp-content/uploads/2023/09/image.jpeg           1300w,
      https://example.org/wp-content/uploads/2023/09/image-300x300.jpeg    300w,
      https://example.org/wp-content/uploads/2023/09/image-1024x1024.jpeg 1024w,
      https://example.org/wp-content/uploads/2023/09/image-150x150.jpeg    150w,
      https://example.org/wp-content/uploads/2023/09/image-768x768.jpeg    768w
    "
    sizes="(max-width: 1300px) 100vw, 1300px"
  />
</figure>

Featured image markup:

<img src="https://timber-image-optimization.instawp.xyz/wp-content/uploads/2023/09/image-1200x300-c-default.jpeg">

[westonruter]

Here's a workaround plugin that addresses the issue with the_content images in a Timber-based theme: ​https://gist.github.com/westonruter/456afa3cbf29563ffd590401988f1a23

It uses HTML Tag Processor to optimize images in the first the_content:

• The first five images have the loading attribute removed.
• Each initial image's dimensions are captured and the largest one is given fetchpriority=high.
• As soon as a second paragraph is encountered, optimization is halted.