[wp-trac] [WordPress Trac] #50909: WordPress 5.5 update adds height and width attributes to images

[WordPress Trac]

#50909: WordPress 5.5 update adds height and width attributes to images
-------------------------------+------------------------------
 Reporter:  jeslen             |       Owner:  (none)
     Type:  defect (bug)       |      Status:  new
 Priority:  normal             |   Milestone:  Awaiting Review
Component:  Media              |     Version:  5.5
 Severity:  normal             |  Resolution:
 Keywords:  close 2nd-opinion  |     Focuses:
-------------------------------+------------------------------
Changes (by azaozz):

 * keywords:   => close 2nd-opinion


Comment:

 > It appears that some images added with the gutenberg editor (no updates
 since June) now have height and width attributes...

 Right. This has been considered "best practice" for very long time,
 perhaps since the late 1990's - early 2000's. The reason is simple: with
 width and height attributes the browser will "know" the size of an image
 before the image file is downloaded. This prevents a (quite unsightly)
 shifting of the content especially on slower connections.

 How that works (in simple terms): Having `width` and `height` in the `img`
 tag allows the browser to set the [https://developer.mozilla.org/en-
 US/docs/Web/HTML/Element/img intrinsic size] of the image as soon as the
 HTML is downloaded, long before images are downloaded. If not set, the
 browser has to wait until the image is downloaded.

 In WordPress, the old (classic) editor always included width and height
 for img tags. In the early days of Gutenberg that was dropped for some
 reason (I'm pretty sure there was/is an old PR to always add width and
 height to all img tags, unfortunately it was never merged). Currently
 images in the image block do not have width and height attributes when
 they are inserted, but get them when they are resized by the user.

 In that terms the defects (skewed images on the front-end) described here
 can be considered "bugs" in the theme. Before WP 5.5 some img hags had
 width and height, others did not. This was corrected in WP 5.5 and now all
 img tags (for local images) get width and height added, to comply with the
 best practices and enhance the website visitors experience. Themes that do
 not handle img tags with width and height attributes were "buggy" before
 WP 5.5 too, although that was less noticeable as authors do not resize
 images in the editor often.

 Looking at the (proposed) fixes here: It may make sense to add
 {{{
 img {
   max-width: 100%;
   height: auto;
 }
 }}}

 to the default CSS for the front-end (to "help" themes that do not handle
 images well), however different themes may want to handle this
 differently, and this may affect how they work. Adding "second-opinion"
 keyword for that reason.

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