[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:  needs-patch reporter-feedback  |     Focuses:  performance
-------------------------------------------+--------------------------

Comment (by dooperweb):

 Thank you for the prompt response, @joemcgill.

 Template: Impreza
 Page Builder: WPBakery

 This is the preview on Chrome and Opera:

 [[Image(https://i.imgur.com/x21mdlC.png)]]

 In the example, Image Element 2 displays the image at the proper size.

 This issue only occurs with images where I use the image element in
 WPBakery. WPBakery has lazy loading enabled by default, which can be
 disabled individually for each item. When I disable lazy loading, the
 image displays correctly.

 [[Image(https://i.imgur.com/drht1AC.jpeg)]]

 [[Image(https://i.imgur.com/NKEqbq5.jpeg)]]



 Below is the source code of the two elements:

 Image Element 1 with lazy load enabled (default setting):


 {{{
 <div class="w-image-h"><img decoding="async" width="300" height="300"
 src="https://example.com/wp-content/uploads/2024/11/red-wordpress-icon-
 2048x2048-nw66awj8-300x300.png" class="attachment-medium size-medium"
 alt="" loading="lazy" srcset="https://example.com/wp-
 content/uploads/2024/11/red-wordpress-icon-2048x2048-nw66awj8-300x300.png
 300w, https://example.com/wp-content/uploads/2024/11/red-wordpress-icon-
 2048x2048-nw66awj8-1024x1024.png 1024w, https://example.com/wp-
 content/uploads/2024/11/red-wordpress-icon-2048x2048-nw66awj8-150x150.png
 150w, https://example.com/wp-content/uploads/2024/11/red-wordpress-icon-
 2048x2048-nw66awj8-96x96.png 96w, https://example.com/wp-
 content/uploads/2024/11/red-wordpress-icon-2048x2048-nw66awj8.png 2048w"
 sizes="auto, (max-width: 300px) 100vw, 300px"></div>
 }}}


 Image Element 2 with lazy load disabled in WPBakery:


 {{{
 <div class="w-image-h"><img fetchpriority="high" decoding="async"
 width="300" height="300" src="https://example.com/wp-
 content/uploads/2024/11/red-wordpress-icon-2048x2048-nw66awj8-300x300.png"
 class="attachment-medium size-medium" alt="" loading="eager"
 srcset="https://example.com/wp-content/uploads/2024/11/red-wordpress-icon-
 2048x2048-nw66awj8-300x300.png 300w, https://example.com/wp-
 content/uploads/2024/11/red-wordpress-icon-
 2048x2048-nw66awj8-1024x1024.png 1024w, https://example.com/wp-
 content/uploads/2024/11/red-wordpress-icon-2048x2048-nw66awj8-150x150.png
 150w, https://example.com/wp-content/uploads/2024/11/red-wordpress-icon-
 2048x2048-nw66awj8-96x96.png 96w, https://example.com/wp-
 content/uploads/2024/11/red-wordpress-icon-2048x2048-nw66awj8.png 2048w"
 sizes="(max-width: 300px) 100vw, 300px"></div>

 }}}



 I have also seen similar complaints in a few forums, so I wanted to report
 it here.

 Since my site has many images added this way, it would be too time-
 consuming to disable lazy load on each one individually. For now, I’ve
 downgraded to an older WordPress version to avoid this issue.

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