diff --git a/plugins/auto-sizes/optimization-detective.php b/plugins/auto-sizes/optimization-detective.php
index afe9b54d42..7b265edf5d 100644
--- a/plugins/auto-sizes/optimization-detective.php
+++ b/plugins/auto-sizes/optimization-detective.php
@@ -24,13 +24,27 @@ function auto_sizes_visit_tag( OD_Tag_Visitor_Context $context ): bool {
}
$sizes = $context->processor->get_attribute( 'sizes' );
- if ( ! is_string( $sizes ) || 'lazy' !== $context->processor->get_attribute( 'loading' ) ) {
+ if ( ! is_string( $sizes ) ) {
return false;
}
$sizes = preg_split( '/\s*,\s*/', $sizes );
- if ( is_array( $sizes ) && ! in_array( 'auto', $sizes, true ) ) {
+ if ( ! is_array( $sizes ) ) {
+ return false;
+ }
+
+ $is_lazy_loaded = ( 'lazy' === $context->processor->get_attribute( 'loading' ) );
+ $has_auto_sizes = in_array( 'auto', $sizes, true );
+
+ $changed = false;
+ if ( $is_lazy_loaded && ! $has_auto_sizes ) {
array_unshift( $sizes, 'auto' );
+ $changed = true;
+ } elseif ( ! $is_lazy_loaded && $has_auto_sizes ) {
+ $sizes = array_diff( $sizes, array( 'auto' ) );
+ $changed = true;
+ }
+ if ( $changed ) {
$context->processor->set_attribute( 'sizes', join( ', ', $sizes ) );
}
diff --git a/plugins/auto-sizes/tests/test-optimization-detective.php b/plugins/auto-sizes/tests/test-optimization-detective.php
index ef1f2c5c09..7fab403b4d 100644
--- a/plugins/auto-sizes/tests/test-optimization-detective.php
+++ b/plugins/auto-sizes/tests/test-optimization-detective.php
@@ -39,7 +39,7 @@ public function test_auto_sizes_register_tag_visitors(): void {
public function data_provider_test_od_optimize_template_output_buffer(): array {
return array(
// Note: The Image Prioritizer plugin removes the loading attribute, and so then Auto Sizes does not then add sizes=auto.
- 'wrongly_lazy_responsive_img' => array(
+ 'wrongly_lazy_responsive_img' => array(
'element_metrics' => array(
'xpath' => '/*[1][self::HTML]/*[2][self::BODY]/*[1][self::IMG]',
'isLCP' => false,
@@ -49,7 +49,7 @@ public function data_provider_test_od_optimize_template_output_buffer(): array {
'expected' => '',
),
- 'non_responsive_image' => array(
+ 'non_responsive_image' => array(
'element_metrics' => array(
'xpath' => '/*[1][self::HTML]/*[2][self::BODY]/*[1][self::IMG]',
'isLCP' => false,
@@ -59,7 +59,7 @@ public function data_provider_test_od_optimize_template_output_buffer(): array {
'expected' => '',
),
- 'auto_sizes_added' => array(
+ 'auto_sizes_added' => array(
'element_metrics' => array(
'xpath' => '/*[1][self::HTML]/*[2][self::BODY]/*[1][self::IMG]',
'isLCP' => false,
@@ -69,7 +69,7 @@ public function data_provider_test_od_optimize_template_output_buffer(): array {
'expected' => '',
),
- 'auto_sizes_already_added' => array(
+ 'auto_sizes_already_added' => array(
'element_metrics' => array(
'xpath' => '/*[1][self::HTML]/*[2][self::BODY]/*[1][self::IMG]',
'isLCP' => false,
@@ -78,6 +78,17 @@ public function data_provider_test_od_optimize_template_output_buffer(): array {
'buffer' => '',
'expected' => '',
),
+
+ // If Auto Sizes added the sizes=auto attribute but Image Prioritizer ended up removing it due to the image not being lazy-loaded, remove sizes=auto again.
+ 'wrongly_auto_sized_responsive_img' => array(
+ 'element_metrics' => array(
+ 'xpath' => '/*[1][self::HTML]/*[2][self::BODY]/*[1][self::IMG]',
+ 'isLCP' => false,
+ 'intersectionRatio' => 1,
+ ),
+ 'buffer' => '',
+ 'expected' => '',
+ ),
);
}