[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        |  Resolution:
 Keywords:  needs-patch   |     Focuses:  performance
--------------------------+-----------------------------
Description changed by westonruter:

Old description:

> 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"`.

New description:

 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 when it is
 immediately followed by an image block with a large size.

 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#comment:2>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform