[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:  reviewing
 Priority:  normal                              |   Milestone:  6.7.1
Component:  General                             |     Version:
 Severity:  major                               |  Resolution:
 Keywords:  reporter-feedback has-testing-info  |     Focuses:  performance
------------------------------------------------+--------------------------
Changes (by SirLouen):

 * keywords:  needs-patch reporter-feedback => reporter-feedback has-
     testing-info


Comment:

 == Reproduction Report
 This report can't validate that the issue can be reproduced with the given
 information.

 I've been trying to reproduce this problem first with WordPress "native
 environment" and only trying to observe first-hand on a clean WP how I
 could trigger the `loading=lazy` on the images, and only after a
 significant amount of time I happen to discover this

 {{{#!php
 <?php
 /**
  * Filters the threshold for how many of the first content media elements
 to not lazy-load.
  *
  * For these first content media elements, the `loading` attribute will be
 omitted. By default, this is the case
  * for only the very first content media element.
  *
  * @since 5.9.0
  * @since 6.3.0 The default threshold was changed from 1 to 3.
  *
  * @param int $omit_threshold The number of media elements where the
 `loading` attribute will not be added. Default 3.
  */
 $omit_threshold = apply_filters( 'wp_omit_loading_attr_threshold', 3 );
 }}}


 Here we can see that there is a **hard-coded threshold** where, for some
 reason and some versions ago (6.3), it was decided to move it from 1 to 3
 images.

 So if we happen to have 3 or fewer images loading, they won't have the
 `loading=lazy` added by default

 The convoluted part is that there is literally 0 info about this online,
 so I believe that it's good to know this first-place to analyze this issue
 🤔

 === 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

 === Reproduction Steps
 **STEP 1**. Edit the theme CSS to show unrestricted width of the images on
 display. I've added a Child-Theme just for convenience.
 For example, in Twenty-Twenty:
 `
 {{{
 #site-content p,
 #site-content figure {
         max-width: 100%;
 }
 }}}

 **STEP 2**. Create a new Post.
 **STEP 3**. Add some text and 4 high-resolution images (+1000px width)
 without any extra parameters
 **STEP 4**. The 4th one will receive the `loading=lazy` tag and is the one
 that we are expecting to be downscaled.
 **STEP 5**. Observe if the last image is loading full resolution

 === First Results
 - ❌ Error condition doesn't occur, last image loads adequately

 Now that the default `loading=lazy` is being loaded in the 4th image, I
 will add some extra steps for testing given the information provided by
 the reporter.

 **STEP 6**. In `functions.php`, we add this code to forcefully set-up
 `loading=lazy` to **all images**, regardless of the built-in functionality
 of WordPress:

 {{{#!php
 <?php
 function add_lazy_loading_to_content_images( $content ) {
         return preg_replace( '/<img(.*?)>/', '<img$1 loading="lazy">',
 $content );
 }
 add_filter( 'the_content', 'add_lazy_loading_to_content_images' );
 }}}

 **STEP 7**. Observe if the last image is loading full resolution

 === Final Results
 - ❌ Error condition doesn't occur, last image loads adequately again,
 issue can't be reproduced solely using WordPress, maybe there could be a
 conflicting issue with WP-Bakery code.

 === Additional Notes

 There is another closed similar issue #62345, which was fixed, but was
 failing due to another condition (Gutenberg adding `width: fit-content`)
 so probably it's unrelated.

 I've also tried limiting `width` of the 4th image to different resolutions
 (1000, 800, 600), and they all display in the right size.

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