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' => 'Foo', ), - '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' => 'Quux', ), - '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' => 'Foo', ), - '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' => 'Foo', 'expected' => 'Foo', ), + + // 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' => 'Foo', + 'expected' => 'Foo', + ), ); }