[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:  flixos90
     Type:  defect (bug)              |      Status:  assigned
 Priority:  normal                    |   Milestone:  5.5
Component:  Media                     |     Version:
 Severity:  normal                    |  Resolution:
 Keywords:  has-patch has-unit-tests  |     Focuses:
--------------------------------------+-----------------------

Comment (by adamsilverstein):

 Nice work @flixos90! This worked well in my testing.

 * I created a test post with a single medium image and left aligned it
 next to a block of text.
 * Tested loading the post using a throttled connection to simulate a slow
 load experience.

 Result:

 Before the patch the text shows a square block, then jumps around once the
 image loads to make room for it. After the patch the image width/height is
 included in the img src tag (when I view the html), so the browser shows a
 blank space while the image is loading, which the text wraps around. Once
 the image loads, no jumping occurs - the text is already in the right
 spot. Attaching some screencast gifs of my tests.

 This feels like a great improvement: one question though - why are these
 images missing the width/height in the first place when inserted with the
 block editor? I'm guessing this is discussed on the issue you linked, I
 haven't read the entire thing :)

 For now though, many users are sure to have created content that includes
 image tags lacking width/height attributes. This change will likely
 provide measurable improvements in reducing cumulative layout shift for
 these sites. Let's get this in before 5.5 beta so it can get some wider
 testing.

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