[wp-trac] [WordPress Trac] #59352: Inline images inserted in the block editor can erroneously get fetchpriority=high

[WordPress Trac]

#59352: Inline images inserted in the block editor can erroneously get
fetchpriority=high
--------------------------+----------------------------
 Reporter:  westonruter   |      Owner:  (none)
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Future Release
Component:  Media         |    Version:  6.3
 Severity:  normal        |   Keywords:  needs-patch
  Focuses:  performance   |
--------------------------+----------------------------
 I found that inserting an inline image in the block editor can result in
 it erroneously getting `fetchpriority=high` even though it is normally
 rendered as a small image. When inserting an inline image, the default
 size (width) is 150 pixels. Nevertheless, the originally uploaded image is
 actually chosen for the `src` (along with its `width` and `height` and the
 user-supplied size is added as an inline `width` CSS style. Here is the
 rendered markup for an inline image appearing as the first image in the
 content:

 {{{
 <img
   decoding="async"
   fetchpriority="high"
   width="534"
   height="534"
   class="wp-image-143"
   style="width: 30px"
   src="http://example.org/wp-content/uploads/2023/09/u1f629_u1f973.png"
   alt="Anguished partygoer emoji"
   srcset="
     http://example.org/wp-content/uploads/2023/09/u1f629_u1f973.png
 534w,
     http://example.org/wp-
 content/uploads/2023/09/u1f629_u1f973-300x300.png 300w,
     http://example.org/wp-
 content/uploads/2023/09/u1f629_u1f973-150x150.png 150w
   "
   sizes="(max-width: 534px) 100vw, 534px"
 />
 }}}

 The `fetchpriority=high` attribute is added to this image even if the
 immediately-following image is a large image block.

 To address this, `wp_get_loading_optimization_attributes()` could take
 into account `$attr['style']` and parse out any `width` property which
 would override `$attr['width']`. This should address inline images from
 the block editor, but note it would not account for images that are
 resized by CSS style rules.

 Aside: The `sizes` attribute here, at least in Twenty Twenty-Three, is
 causing the full size image to be rendered even though the thumbnail size
 is included in the `srcset`. It seems like whatever the user supplied as
 the size of the image (e.g. 30px here) should be mirrored between the
 inline `style` attribute's `width` and the `sizes` attribute. So here it
 could be `sizes="30px"`.

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