Remove sizes=auto if Image Prioritizer removed lazy-loading

WordPress · Jul 15, 2024 · f5e4231 · f5e4231
1 parent b485b35
commit f5e4231
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 6 deletions.
diff --git 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
@@ -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'        => '<img data-od-removed-loading="lazy" src="https://example.com/foo.jpg" alt="Foo" width="1200" height="800"  srcset="https://example.com/foo-480w.jpg 480w, https://example.com/foo-800w.jpg 800w" sizes="(max-width: 600px) 480px, 800px">',
 			),
 
-			'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'        => '<img src="https://example.com/foo.jpg" alt="Quux" width="1200" height="800" loading="lazy">',
 			),
 
-			'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'        => '<img data-od-replaced-sizes="(max-width: 600px) 480px, 800px" src="https://example.com/foo.jpg" alt="Foo" width="1200" height="800" loading="lazy" srcset="https://example.com/foo-480w.jpg 480w, https://example.com/foo-800w.jpg 800w" sizes="auto, (max-width: 600px) 480px, 800px">',
 			),
 
-			'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'          => '<img src="https://example.com/foo.jpg" alt="Foo" width="1200" height="800" loading="lazy" srcset="https://example.com/foo-480w.jpg 480w, https://example.com/foo-800w.jpg 800w" sizes="auto, (max-width: 600px) 480px, 800px">',
 				'expected'        => '<img src="https://example.com/foo.jpg" alt="Foo" width="1200" height="800" loading="lazy" srcset="https://example.com/foo-480w.jpg 480w, https://example.com/foo-800w.jpg 800w" sizes="auto, (max-width: 600px) 480px, 800px">',
 			),
+
+			// 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'          => '<img src="https://example.com/foo.jpg" alt="Foo" width="1200" height="800" loading="lazy" srcset="https://example.com/foo-480w.jpg 480w, https://example.com/foo-800w.jpg 800w" sizes="auto, (max-width: 600px) 480px, 800px">',
+				'expected'        => '<img data-od-replaced-sizes="auto, (max-width: 600px) 480px, 800px" data-od-removed-loading="lazy" src="https://example.com/foo.jpg" alt="Foo" width="1200" height="800"  srcset="https://example.com/foo-480w.jpg 480w, https://example.com/foo-800w.jpg 800w" sizes="(max-width: 600px) 480px, 800px">',
+			),
 		);
 	}