WordPress 6.7.1 Auto-sizes Reducing Image Sizes

[thyran]

In relation to ticket #62413
Upon updating to WordPress 6.7, I noticed that images on my site appeared drastically smaller than intended.
It appears that WordPress 6.7 adds an auto lazy load attribute by default, which may be conflicting with existing lazy load features and causing images to render improperly.

---

WordPress 6.7.1 Release Schedule indicated this will be fixed:
Targeted Fixes: The following are the high priority items that cumulatively make a fast-follow release necessary:
sizes=auto causing images to show smaller than they should (#62413)

After updating to ver 6.7.1 purging site and cdn cache I am still seeing the image stetching on any exisitng content. Adding / replacing the effected images renders them correctly.

Browsers Tested: Chrome and Edge

[joemcgill]

Hi @thyran, thanks for the report. Could you provide any additional information about how images are being displayed on your site or reproduction steps that can be taken to demonstrate what you're seeing?

[thyran]

Replying to joemcgill:

Hi @thyran, thanks for the report. Could you provide any additional information about how images are being displayed on your site or reproduction steps that can be taken to demonstrate what you're seeing?

Hi @joemcgill
Thank you for your response.

We noticed the issue on uur clients websites after installing WordPress 6.7
See screen shot example of issue at ​https://snipboard.io/1YDz2n.jpg

We use Divi theme and the issue appears to be present on
blog modules where we dymanically listing post content with their featured images
blurb modules with images placed in rows with multiple columns

Divi theme support indicated that:

Pavel from Elegant Themes: Hi Thyran 👋

Thank you for contacting ET Support! It's due to the recent changes of WordPress in their update, causing images to display smaller. Here's a reference: https://core.trac.wordpress.org/ticket/62345 (https://core.trac.wordpress.org/ticket/62345)

This will be addressed in WordPress as soon as possible:

WordPress 6.7 Auto-sizes Reducing Image Sizes (https://core.trac.wordpress.org/ticket/62413) and the PR can be found here: Print CSS rule to fix potential visual issues with auto-sizes (​https://github.com/WordPress/wordpress-develop/pull/7813#top)

As a temporary solution, you can just install and activate the Disable Lazy Load (​https://wordpress.org/plugins/disable-lazy-loading/) plugin. I've done that for you on the ​https://bayfarms.net.nz/ site.

If I install a plugin called Disable Lazy Load - Activate this plugin to disable WP Lazy Loading the issue is resolved.

After installing 6.7.1 the issue is still present as you can see from the above screen shots (Have not installed the Disable Lazy Load Plugin) - Activate this plugin to disable WP Lazy Loading

I tested creating new post content on a test site and it appears the stretching is not present when creating new posts after updating to 6.7.1

See example here ​https://visionlab.online/divitest/

Hope this helps.

Thank you

[joemcgill]

visionlab.online/divitest example

[joemcgill]

Hi @thyran, thanks for the additional info. After reviewing both the live site and the demo site you referenced, it looks like both are running WordPress 6.7.1 with auto-sizes enabled and the stretching shown in ​your original screenshot no longer seems to be occurring.

Let me know if you believe I've misunderstood how to observe the bug.

Further down the example URL you shared, the full width layout images do seem to be distorted as a result of the auto-sizes functionality, but this seems to be due to the image markup including incorrect width and height attributes, authoring the image at 1080x675, while the intrinsic dimensions of the src image is 500x375:

<img loading="lazy" decoding="async" 
src="https://visionlab.online/divitest/wp-content/uploads/2024/11/peter.jpg" 
alt="Peter Edwards" class="" width="1080" height="675" 
srcset="https://visionlab.online/divitest/wp-content/uploads/2024/11/peter.jpg 1080w, https://visionlab.online/divitest/wp-content/uploads/2024/11/peter-480x360.jpg 480w" 
sizes="auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 1080px, 100vw">

I'm unsure what is causing this misconfiguration, but it doesn't seem to be a workaround in the meantime would be to disable the auto-sizes feature using the new filter added in WordPress 6.7.1:

add_filter( 'wp_img_tag_add_auto_sizes', '__return_false' );

I would strongly suggest using this workaround instead of disabling lazy loading in order to address this visual issue, as that will result in site visitors loading more images than are necessary when a page is first loaded.

Given that this does not seem to be a core issue, nor a reproducible bug, I'm tentatively marking this ticket as a close candidate unless additional information is available.

[joemcgill]

Seeing no feedback on this, I'm going to go ahead and close. Anyone following this issue please note that additional conversation about potential bugs related to the auto-sizes functionality that was added in 6.7 and updated in 6.7.1 is being tracked in #62515.