[wp-trac] [WordPress Trac] #59331: Image optimizations fail to apply when using Timber

[WordPress Trac]

#59331: Image optimizations fail to apply when using Timber
--------------------------+----------------------------
 Reporter:  westonruter   |      Owner:  (none)
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Future Release
Component:  Media         |    Version:  6.3
 Severity:  normal        |   Keywords:
  Focuses:  performance   |
--------------------------+----------------------------
 A user [https://mastodon.social/@grigs@front-end.social/111052735378137214
 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
 [https://github.com/WordPress/performance/issues/805 proposed] for a
 module in the Performance Lab plugin.

 Here's how to reproduce the issue with Timber:

 1. Install and activate the [https://wordpress.org/plugins/timber-library/
 Timber plugin] from WordPress.org.
 2. Install and activate the [https://github.com/timber/starter-theme
 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">
 }}}

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/59331>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform