[wp-trac] [WordPress Trac] #50367: Avoid layout shifting due to images not having dimension attributes

[WordPress Trac]

#50367: Avoid layout shifting due to images not having dimension attributes
--------------------------+-------------------------
 Reporter:  flixos90      |      Owner:  (none)
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  5.5
Component:  Media         |    Version:
 Severity:  normal        |   Keywords:  needs-patch
  Focuses:                |
--------------------------+-------------------------
 Images added to post content via the block editor typically do not provide
 `width` and `height` attributes which increases layout shifting from
 images being loaded, harming user experience.

 This becomes most obvious on slow network connections, but can be observed
 even on fast networks. In the split second where the image gets downloaded
 by the browser, the content below the image shifts if `width` and `height`
 are not present on the `img` tag.

 This problem also has minor implications on lazy-loading (#44427), as it
 is explicitly recommended to provide dimensions:
 https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-
 loading

 WordPress has the
 [https://developer.wordpress.org/reference/functions/wp_image_add_srcset_and_sizes/
 wp_image_add_srcset_and_sizes] function in place to on-the-fly add
 `srcset` and `sizes` attributes to images which already works for images
 without dimension attributes, by looking at the relevant image metadata.
 This should be expanded to also add the actual `width` and `height`
 attributes in those cases.

 The `loading` attribute should then only be added to `img` tags that have
 dimensions available.

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