Move Auto Sizes logic from Enhanced Responsive Images to Image Prioritizer

plugins/auto-sizes/auto-sizes.php

@@ -28,5 +28,3 @@
 define( 'IMAGE_AUTO_SIZES_VERSION', '1.2.0' );
 
 require_once __DIR__ . '/hooks.php';
-
-require_once __DIR__ . '/optimization-detective.php';

plugins/auto-sizes/hooks.php

@@ -98,8 +98,8 @@ function auto_sizes_update_content_img_tag( $html ): string {
  * @return bool True if the 'auto' keyword is present, false otherwise.
  */
 function auto_sizes_attribute_includes_valid_auto( string $sizes_attr ): bool {
-	$token = strtok( strtolower( $sizes_attr ), ',' );
-	return false !== $token && 'auto' === trim( $token, " \t\f\r\n" );
+	list( $first_size ) = explode( ',', $sizes_attr, 2 );
+	return 'auto' === strtolower( trim( $first_size, " \t\f\r\n" ) );
 }
 
 /**

plugins/auto-sizes/tests/test-auto-sizes.php

@@ -262,6 +262,10 @@ public function data_provider_to_test_auto_sizes_update_content_img_tag(): array
 				'input'    => '<img src="https://example.com/foo-300x225.jpg" srcset="https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w" sizes=auto loading="lazy">',
 				'expected' => '<img src="https://example.com/foo-300x225.jpg" srcset="https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w" sizes=auto loading="lazy">',
 			),
+			'expected_when_auto_size_preceded_by_extra_commas' => array(
+				'input'    => '<img src="https://example.com/foo-300x225.jpg" srcset="https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w" sizes=",,,,,,,,,auto, (max-width: 650px) 100vw, 650px" loading="lazy">',
+				'expected' => '<img src="https://example.com/foo-300x225.jpg" srcset="https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w" sizes="auto, ,,,,,,,,,auto, (max-width: 650px) 100vw, 650px" loading="lazy">',
+			),
 		);
 	}
 

plugins/image-prioritizer/class-image-prioritizer-img-tag-visitor.php

@@ -40,14 +40,28 @@ public function __invoke( OD_Tag_Visitor_Context $context ): bool {
 
 		$xpath = $processor->get_xpath();
 
+		/**
+		 * Gets attribute value.
+		 *
+		 * @param string $attribute_name Attribute name.
+		 * @return string|true|null Normalized attribute value.
+		 */
+		$get_attribute_value = static function ( string $attribute_name ) use ( $processor ) {
+			$value = $processor->get_attribute( $attribute_name );
+			if ( is_string( $value ) ) {
+				$value = strtolower( trim( $value, " \t\f\r\n" ) );
+			}
+			return $value;
+		};
+
 		/*
 		 * When the same LCP element is common/shared among all viewport groups, make sure that the element has
 		 * fetchpriority=high, even though it won't really be needed because a preload link with fetchpriority=high
 		 * will also be added. Additionally, ensure that this common LCP element is never lazy-loaded.
 		 */
 		$common_lcp_element = $context->url_metrics_group_collection->get_common_lcp_element();
 		if ( ! is_null( $common_lcp_element ) && $xpath === $common_lcp_element['xpath'] ) {
-			if ( 'high' === $processor->get_attribute( 'fetchpriority' ) ) {
+			if ( 'high' === $get_attribute_value( 'fetchpriority' ) ) {
 				$processor->set_meta_attribute( 'fetchpriority-already-added', true );
 			} else {
 				$processor->set_attribute( 'fetchpriority', 'high' );
@@ -81,7 +95,7 @@ public function __invoke( OD_Tag_Visitor_Context $context ): bool {
 		} else {
 			// Otherwise, make sure visible elements omit the loading attribute, and hidden elements include loading=lazy.
 			$is_visible = $element_max_intersection_ratio > 0.0;
-			$loading    = (string) $processor->get_attribute( 'loading' );
+			$loading    = $get_attribute_value( 'loading' );
 			if ( $is_visible && 'lazy' === $loading ) {
 				$processor->remove_attribute( 'loading' );
 			} elseif ( ! $is_visible && 'lazy' !== $loading ) {
@@ -90,6 +104,23 @@ public function __invoke( OD_Tag_Visitor_Context $context ): bool {
 		}
 		// TODO: If an image is visible in one breakpoint but not another, add loading=lazy AND add a regular-priority preload link with media queries (unless LCP in which case it should already have a fetchpriority=high link) so that the image won't be eagerly-loaded for viewports on which it is not shown.
 
+		// Ensure that sizes=auto is set properly.
+		$sizes = $processor->get_attribute( 'sizes' );
+		if ( is_string( $sizes ) ) {
+			$is_lazy  = 'lazy' === $get_attribute_value( 'loading' );
+			$has_auto = $this->sizes_attribute_includes_valid_auto( $sizes );
+
+			if ( $is_lazy && ! $has_auto ) {
+				$processor->set_attribute( 'sizes', "auto, $sizes" );
+			} elseif ( ! $is_lazy && $has_auto ) {
+				// Remove auto from the beginning of the list.
+				$processor->set_attribute(
+					'sizes',
+					(string) preg_replace( '/^[ \t\f\r\n]*auto[ \t\f\r\n]*(,[ \t\f\r\n]*)?/i', '', $sizes )
+				);
+			}
+		}
+
 		// If this element is the LCP (for a breakpoint group), add a preload link for it.
 		foreach ( $context->url_metrics_group_collection->get_groups_by_lcp_element( $xpath ) as $group ) {
 			$link_attributes = array_merge(
@@ -110,8 +141,8 @@ static function ( string $value ): bool {
 				)
 			);
 
-			$crossorigin = $processor->get_attribute( 'crossorigin' );
-			if ( is_string( $crossorigin ) ) {
+			$crossorigin = $get_attribute_value( 'crossorigin' );
+			if ( null !== $crossorigin ) {
 				$link_attributes['crossorigin'] = 'use-credentials' === $crossorigin ? 'use-credentials' : 'anonymous';
 			}
 
@@ -126,4 +157,24 @@ static function ( string $value ): bool {
 
 		return true;
 	}
+
+	/**
+	 * Checks whether the given 'sizes' attribute includes the 'auto' keyword as the first item in the list.
+	 *
+	 * Per the HTML spec, if present it must be the first entry.
+	 *
+	 * @since n.e.x.t
+	 *
+	 * @param string $sizes_attr The 'sizes' attribute value.
+	 * @return bool True if the 'auto' keyword is present, false otherwise.
+	 */
+	private function sizes_attribute_includes_valid_auto( string $sizes_attr ): bool {
+		if ( function_exists( 'wp_sizes_attribute_includes_valid_auto' ) ) {
+			return wp_sizes_attribute_includes_valid_auto( $sizes_attr );
+		} elseif ( function_exists( 'auto_sizes_attribute_includes_valid_auto' ) ) {
+			return auto_sizes_attribute_includes_valid_auto( $sizes_attr );
+		} else {
+			return 'auto' === $sizes_attr || str_starts_with( $sizes_attr, 'auto,' );
+		}
+	}
 }

plugins/image-prioritizer/tests/test-cases/common-lcp-image-and-lazy-loaded-image-outside-viewport-with-fully-populated-sample-data.php

@@ -55,7 +55,7 @@
 				<p>Now the following image is definitely outside the initial viewport.</p>
 				<img src="https://example.com/baz.jpg" alt="Baz" width="10" height="10" fetchpriority="high">
 				<img src="https://example.com/qux.jpg" alt="Qux" width="10" height="10" fetchpriority="high" loading="eager">
-				<img src="https://example.com/quux.jpg" alt="Quux" width="10" height="10" loading="lazy"><!-- This one is all good. -->
+				<img src="https://example.com/quux.jpg" alt="Quux" width="10" height="10" loading="LAZY"><!-- This one is all good. -->
 			</body>
 		</html>
 	',
@@ -73,7 +73,7 @@
 				<p>Now the following image is definitely outside the initial viewport.</p>
 				<img data-od-added-loading data-od-removed-fetchpriority="high" loading="lazy" src="https://example.com/baz.jpg" alt="Baz" width="10" height="10" >
 				<img data-od-removed-fetchpriority="high" data-od-replaced-loading="eager" src="https://example.com/qux.jpg" alt="Qux" width="10" height="10"  loading="lazy">
-				<img src="https://example.com/quux.jpg" alt="Quux" width="10" height="10" loading="lazy"><!-- This one is all good. -->
+				<img src="https://example.com/quux.jpg" alt="Quux" width="10" height="10" loading="LAZY"><!-- This one is all good. -->
 			</body>
 		</html>
 	',