[wp-trac] [WordPress Trac] #62413: WordPress 6.7 Lazy Load Issue Reducing Image Sizes

[WordPress Trac]

#62413: WordPress 6.7 Lazy Load Issue Reducing Image Sizes
------------------------------------+--------------------------
 Reporter:  dooperweb               |       Owner:  joemcgill
     Type:  defect (bug)            |      Status:  closed
 Priority:  normal                  |   Milestone:  6.7.1
Component:  Media                   |     Version:  trunk
 Severity:  trivial                 |  Resolution:  wontfix
 Keywords:  has-testing-info close  |     Focuses:  performance
------------------------------------+--------------------------
Changes (by SirLouen):

 * status:  reviewing => closed
 * severity:  major => trivial
 * component:  General => Media
 * version:   => trunk
 * keywords:  reporter-feedback has-testing-info needs-patch => has-testing-
     info close
 * resolution:   => wontfix


Comment:

 == Reproduction Report. Version 2
 This second report validates that the issue can be reproduced, but no more
 action should be taken.

 === Environment
 - OS: Windows 11
 - Web stack: Nginx Docker (wordpress-developer env)
 - WordPress: 6.8-alpha-59274-src
 - Browser: Chrome 131.0.6778.69
 - Theme: Twenty-Twenty
 - Active Plugins:
   - None

 === Actual Results
 - ✅ Error condition occurs (reproduced).

 === Steps for Reproduction

 ==== STEP 1
 I'm working with the Twenty-Twenty theme, so again, I have introduced an
 unrestricted width for the main content in the CSS. Most changes can be
 done in Them `Customize`⇾`Custom CSS`

 {{{
 #site-content p,
 #site-content figure {
         max-width: 100%;
 }
 }}}

 ==== STEP 2
 Create a new Post.
 Add a very good amount of text. Add 4 high-resolution images (+1000px
 width images). Don't modify any parameters

 ==== STEP 3
  The 4th one will receive the `loading=lazy` tag and is the one that we
 are expecting to be downscaled.

 ==== STEP 4
 Since the Gutenberg update:
 https://github.com/WordPress/gutenberg/commit/e503a390e8cbfabb28049babc97489eb0c3827e1
 `fit:content` has been removed from Gutenberg as a selectable option. To
 reproduce this error, we need to add it on purpose.

 According to [[https://developer.mozilla.org/en-US/docs/Web/CSS/fit-
 content|the CSS specification]], `fit-content` is not meant to be used
 directly on HTML elements like `img` but containers like `figure` or
 `div`.

 If I set `fit-content` into the `figure` instead of the `img`, it works
 flawlessly:

 {{{
 .entry-content figure {
     width: fit-content !important;
 }
 }}}

 To reproduce this issue, we need to **forcefully** add this `img` level:

 {{{
 img {
     width: fit-content !important;
 }
 }}}

 ✅ And the issue is reproduced successfully.

 === Additional Notes

 My question was: Why is this exactly happening?

 After some research, I have identified that this is a well-known issue for
 Chromium-based browsers:

 First, we have to know this:

 1. Chrome doesn't apply lazy-loading to any image from 3000px from the
 viewport. This is why it's important to introduce a long text for
 reproduction
 2. Google [[https://web.dev/articles/content-visibility|introduced on
 September 16th]] `content-visibility` property by default in all Chromium-
 based browsers and added to the clients some default specifications, for
 example [[https://web.dev/articles/content-visibility
 #specify_the_natural_size_of_an_element_with_contain-intrinsic-size|a
 fixed `width` of 300px]]. This is the exact number that `width:fit-
 content` is taking to **render** the image.
 3. There is a
 [[https://www.reddit.com/r/chrome/comments/1adr2tv/is_sizesauto_buggy_in_chrome_121/|Chrome
 known issue coming from Chrome 121]] (February 2024) where, if HTML
 property `size` is set to `auto` (as it's implemented in the latest 6.7
 update by default) in combination with `loading=lazy` it happens to
 downscale the image by default.

 So basically, the problem here is that

 Here a Codepen, with a brief example of this Chrome behavior
 https://codepen.io/sirlouen/pen/YzmgByV

 So in conclusion: this Chrome issue that downscale the images, in
 conjunction, with the new `content-visibility` by default, that also
 limits the `width` to 300px, it's generating this issue. You can better
 see this issue in the video attached.

 === Supplemental Artifacts

 1. [[https://i.imgur.com/6LsiVv0.png|Screenshot of two images, width
 limited to 300px]]
 2. [[https://i.imgur.com/PrS5yfy.mp4|Video showing the downscaling issue]]

 === Conclusions & Potential Workarounds

 For the WordPress part, no more actions should be taken. The idea of
 removing `width:fit-content` from Gutenberg was more than enough.

 Potential solutions for the users affected by their themes/page builders
 are:

 1. If you are experiencing this problem, side wide, you should remove
 `size=auto` globally. You can use the
 [[https://core.trac.wordpress.org/ticket/61847#comment:23|proposed
 workaround]] by @flixos90, completely disabling this **feature** from your
 site.
 Remember: This is not a bug, this is a feature implemented
 [[https://html.spec.whatwg.org/#sizes-attributes|based on the HTML spec]].

 2. If this is happening to just a couple of images, simply add manually
 any of the two sizes, either `width` or `height` to your images

 3. The most obvious one: remove `width:fit-content` from the CSS of your
 `img` tags.

 So this issue can be closed, and this answer can be used as a future
 reference.

 Don't hesitate to reopen if there are more scenarios where this issue is
 happening apart from `with:fit-content` documented here.

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