From a985956ed96b0c5f18f6dd6664462be6031dfd03 Mon Sep 17 00:00:00 2001 From: nani-samireddy Date: Sat, 8 Nov 2025 08:48:25 +0530 Subject: [PATCH 01/12] add: utility function to add attachment_id and original_url to the html tag attributes --- plugins/auto-sizes/hooks.php | 2 + .../includes/improve-calculate-sizes.php | 56 +++++++++++++++++++ 2 files changed, 58 insertions(+) diff --git a/plugins/auto-sizes/hooks.php b/plugins/auto-sizes/hooks.php index 5ad0921a13..3f9419b2fe 100644 --- a/plugins/auto-sizes/hooks.php +++ b/plugins/auto-sizes/hooks.php @@ -31,6 +31,8 @@ function auto_sizes_render_generator(): void { add_filter( 'render_block_core/image', 'auto_sizes_filter_image_tag', 10, 3 ); add_filter( 'render_block_core/cover', 'auto_sizes_filter_image_tag', 10, 3 ); add_filter( 'render_block_core/post-featured-image', 'auto_sizes_filter_image_tag', 10, 3 ); +add_filter( 'render_block_core/group', 'auto_sizes_add_background_image_data_attributes', 5, 2 ); +add_filter( 'render_block_core/cover', 'auto_sizes_add_background_image_data_attributes', 5, 2 ); add_filter( 'get_block_type_uses_context', 'auto_sizes_filter_uses_context', 10, 2 ); add_filter( 'render_block_context', 'auto_sizes_filter_render_block_context', 10, 3 ); // @codeCoverageIgnoreEnd diff --git a/plugins/auto-sizes/includes/improve-calculate-sizes.php b/plugins/auto-sizes/includes/improve-calculate-sizes.php index 028400181d..5cd74eb86e 100644 --- a/plugins/auto-sizes/includes/improve-calculate-sizes.php +++ b/plugins/auto-sizes/includes/improve-calculate-sizes.php @@ -396,3 +396,59 @@ function auto_sizes_get_featured_image_attachment_id( int $post_id ): int { return (int) get_post_thumbnail_id( $post_id ); } +/** + * Adds data attributes for background image attachment ID to Group and Cover blocks. + * + * This exposes the attachment ID from block attributes as data attributes on the HTML element, + * allowing Image Prioritizer to access this information without using attachment_url_to_postid(). + * This is particularly important for Cover blocks that may use sizes other than "full". + * + * @param string|mixed $content The block content about to be rendered. + * @param array{ attrs?: array, blockName?: string } $parsed_block The parsed block. + * @return string The updated block content. + */ +function auto_sizes_add_background_image_data_attributes( $content, array $parsed_block ): string { + if ( ! is_string( $content ) || '' === $content ) { + return ''; + } + + $block_name = $parsed_block['blockName'] ?? ''; + $attrs = $parsed_block['attrs'] ?? array(); + + // Extract background image data based on block type. + $attachment_id = null; + $image_url = null; + + if ( 'core/cover' === $block_name ) { + $attachment_id = $attrs['id'] ?? null; + $image_url = $attrs['url'] ?? null; + } elseif ( 'core/group' === $block_name ) { + $attachment_id = $attrs['style']['background']['backgroundImage']['id'] ?? null; + $image_url = $attrs['style']['background']['backgroundImage']['url'] ?? null; + } else { + return $content; + } + + // Validate extracted data. + if ( + ! isset( $attachment_id, $image_url ) || + $attachment_id <= 0 || + '' === $image_url || + ! is_array( wp_get_attachment_metadata( $attachment_id ) ) + ) { + return $content; + } + + // Find and update the element with background image. + $processor = new WP_HTML_Tag_Processor( $content ); + while ( $processor->next_tag() ) { + $style = $processor->get_attribute( 'style' ); + if ( is_string( $style ) && str_contains( $style, 'background-image:' ) && str_contains( $style, $image_url ) ) { + $processor->set_attribute( 'data-bg-attachment-id', (string) $attachment_id ); + $processor->set_attribute( 'data-bg-original-url', $image_url ); + return $processor->get_updated_html(); + } + } + + return $content; +} From dfa6c45292d638bef89a6bc34bddb91d20646c75 Mon Sep 17 00:00:00 2001 From: nani-samireddy Date: Sat, 8 Nov 2025 08:51:45 +0530 Subject: [PATCH 02/12] enhancement: update the background image url based on the container width --- ...er-background-image-styled-tag-visitor.php | 51 +++++++++++++++++++ 1 file changed, 51 insertions(+) diff --git a/plugins/image-prioritizer/class-image-prioritizer-background-image-styled-tag-visitor.php b/plugins/image-prioritizer/class-image-prioritizer-background-image-styled-tag-visitor.php index 12dfb8f9f9..e8da09d679 100644 --- a/plugins/image-prioritizer/class-image-prioritizer-background-image-styled-tag-visitor.php +++ b/plugins/image-prioritizer/class-image-prioritizer-background-image-styled-tag-visitor.php @@ -92,6 +92,9 @@ public function __invoke( OD_Tag_Visitor_Context $context ): bool { $this->add_image_preload_link( $context->link_collection, $group, $background_image_url ); } + // Reduce the background image size if URL Metrics are available. + $this->reduce_background_image_size( $background_image_url, $context ); + $this->lazy_load_bg_images( $context ); return true; @@ -238,4 +241,52 @@ private function lazy_load_bg_images( OD_Tag_Visitor_Context $context ): void { $this->added_lazy_assets = true; } } + + /** + * Reduces background image size by choosing one that fits the element dimensions more closely. + * + * This is similar to how VIDEO poster images are optimized in the Video Tag Visitor. + * + * @param non-empty-string $background_image_url Background image URL. + * @param OD_Tag_Visitor_Context $context Tag visitor context, with the cursor currently at an element with a background image. + */ + private function reduce_background_image_size( string $background_image_url, OD_Tag_Visitor_Context $context ): void { + $processor = $context->processor; + $xpath = $processor->get_xpath(); + + /* + * Obtain maximum width of the element exclusively from the URL Metrics group with the widest viewport width, + * which would be desktop. This prevents the situation where if URL Metrics have only so far been gathered for + * mobile viewports that an excessively-small background image would end up getting served to the first desktop visitor. + */ + $max_element_width = 0; + foreach ( $context->url_metric_group_collection->get_last_group() as $url_metric ) { + foreach ( $url_metric->get_elements() as $element ) { + if ( $element->get_xpath() === $xpath ) { + $max_element_width = max( $max_element_width, $element->get_bounding_client_rect()['width'] ); + break; + } + } + } + + // If the element wasn't present in any URL Metrics gathered for desktop, then abort downsizing the background image. + if ( 0 === $max_element_width ) { + return; + } + + // Try to get the attachment ID from the data attribute (populated via filter from block attributes). + $attachment_id = $processor->get_attribute( 'data-bg-attachment-id' ); + + if ( is_numeric( $attachment_id ) && $attachment_id > 0 ) { + $smaller_image_url = wp_get_attachment_image_url( (int) $attachment_id, array( (int) $max_element_width, 0 ) ); + if ( is_string( $smaller_image_url ) && $smaller_image_url !== $background_image_url ) { + // Replace the background image URL in the style attribute. + $style = $processor->get_attribute( 'style' ); + if ( is_string( $style ) ) { + $updated_style = str_replace( $background_image_url, $smaller_image_url, $style ); + $processor->set_attribute( 'style', $updated_style ); + } + } + } + } } From 3fc31d10e2d9d322d0f382efb813d1957e11065d Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Wed, 14 Jan 2026 16:08:28 -0800 Subject: [PATCH 03/12] Add since tag --- plugins/auto-sizes/includes/improve-calculate-sizes.php | 2 ++ 1 file changed, 2 insertions(+) diff --git a/plugins/auto-sizes/includes/improve-calculate-sizes.php b/plugins/auto-sizes/includes/improve-calculate-sizes.php index 9deb3cde8d..c74cbc9bfd 100644 --- a/plugins/auto-sizes/includes/improve-calculate-sizes.php +++ b/plugins/auto-sizes/includes/improve-calculate-sizes.php @@ -405,6 +405,8 @@ function auto_sizes_get_featured_image_attachment_id( int $post_id ): int { /** * Adds data attributes for background image attachment ID to Group and Cover blocks. * + * @since n.e.x.t + * * This exposes the attachment ID from block attributes as data attributes on the HTML element, * allowing Image Prioritizer to access this information without using attachment_url_to_postid(). * This is particularly important for Cover blocks that may use sizes other than "full". From 134af1c0a97a11ec0697ac8f88112d29821c12a4 Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Wed, 14 Jan 2026 16:09:04 -0800 Subject: [PATCH 04/12] Fix placement of since tag Updated the PHP docblock for clarity and consistency. --- plugins/auto-sizes/includes/improve-calculate-sizes.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/auto-sizes/includes/improve-calculate-sizes.php b/plugins/auto-sizes/includes/improve-calculate-sizes.php index c74cbc9bfd..94c109cf4f 100644 --- a/plugins/auto-sizes/includes/improve-calculate-sizes.php +++ b/plugins/auto-sizes/includes/improve-calculate-sizes.php @@ -405,12 +405,12 @@ function auto_sizes_get_featured_image_attachment_id( int $post_id ): int { /** * Adds data attributes for background image attachment ID to Group and Cover blocks. * - * @since n.e.x.t - * * This exposes the attachment ID from block attributes as data attributes on the HTML element, * allowing Image Prioritizer to access this information without using attachment_url_to_postid(). * This is particularly important for Cover blocks that may use sizes other than "full". * + * @since n.e.x.t + * * @param string|mixed $content The block content about to be rendered. * @param array{ attrs?: array, blockName?: string } $parsed_block The parsed block. * @return string The updated block content. From cf42623f68ebd2b4f981a4276d4a780cd602083a Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Wed, 14 Jan 2026 16:09:31 -0800 Subject: [PATCH 05/12] Add missing line break --- plugins/auto-sizes/includes/improve-calculate-sizes.php | 1 + 1 file changed, 1 insertion(+) diff --git a/plugins/auto-sizes/includes/improve-calculate-sizes.php b/plugins/auto-sizes/includes/improve-calculate-sizes.php index 94c109cf4f..4fc5d9ccea 100644 --- a/plugins/auto-sizes/includes/improve-calculate-sizes.php +++ b/plugins/auto-sizes/includes/improve-calculate-sizes.php @@ -402,6 +402,7 @@ function auto_sizes_get_featured_image_attachment_id( int $post_id ): int { return (int) get_post_thumbnail_id( $post_id ); } + /** * Adds data attributes for background image attachment ID to Group and Cover blocks. * From f49fdc6c2740203ed9f5c33ee46564cac3929085 Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Wed, 14 Jan 2026 16:10:35 -0800 Subject: [PATCH 06/12] Fix indentation and add missing since tag --- ...prioritizer-background-image-styled-tag-visitor.php | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/plugins/image-prioritizer/class-image-prioritizer-background-image-styled-tag-visitor.php b/plugins/image-prioritizer/class-image-prioritizer-background-image-styled-tag-visitor.php index e8da09d679..5a246d9cc8 100644 --- a/plugins/image-prioritizer/class-image-prioritizer-background-image-styled-tag-visitor.php +++ b/plugins/image-prioritizer/class-image-prioritizer-background-image-styled-tag-visitor.php @@ -247,6 +247,8 @@ private function lazy_load_bg_images( OD_Tag_Visitor_Context $context ): void { * * This is similar to how VIDEO poster images are optimized in the Video Tag Visitor. * + * @since n.e.x.t + * * @param non-empty-string $background_image_url Background image URL. * @param OD_Tag_Visitor_Context $context Tag visitor context, with the cursor currently at an element with a background image. */ @@ -255,10 +257,10 @@ private function reduce_background_image_size( string $background_image_url, OD_ $xpath = $processor->get_xpath(); /* - * Obtain maximum width of the element exclusively from the URL Metrics group with the widest viewport width, - * which would be desktop. This prevents the situation where if URL Metrics have only so far been gathered for - * mobile viewports that an excessively-small background image would end up getting served to the first desktop visitor. - */ + * Obtain maximum width of the element exclusively from the URL Metrics group with the widest viewport width, + * which would be desktop. This prevents the situation where if URL Metrics have only so far been gathered for + * mobile viewports that an excessively-small background image would end up getting served to the first desktop visitor. + */ $max_element_width = 0; foreach ( $context->url_metric_group_collection->get_last_group() as $url_metric ) { foreach ( $url_metric->get_elements() as $element ) { From 7748bcaad45bf552991a69e0f872fa99c34bfe70 Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Thu, 26 Feb 2026 13:38:51 -0800 Subject: [PATCH 07/12] Improve data validation Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- plugins/auto-sizes/includes/improve-calculate-sizes.php | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/plugins/auto-sizes/includes/improve-calculate-sizes.php b/plugins/auto-sizes/includes/improve-calculate-sizes.php index 4fc5d9ccea..a98f8c13aa 100644 --- a/plugins/auto-sizes/includes/improve-calculate-sizes.php +++ b/plugins/auto-sizes/includes/improve-calculate-sizes.php @@ -438,9 +438,15 @@ function auto_sizes_add_background_image_data_attributes( $content, array $parse return $content; } + // Normalize attachment ID type if possible. + if ( isset( $attachment_id ) && is_numeric( $attachment_id ) ) { + $attachment_id = (int) $attachment_id; + } + // Validate extracted data. if ( ! isset( $attachment_id, $image_url ) || + ! is_int( $attachment_id ) || $attachment_id <= 0 || '' === $image_url || ! is_array( wp_get_attachment_metadata( $attachment_id ) ) From 119adede03ef464a1927c87880bcfae8ee1f374c Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Thu, 26 Feb 2026 13:40:04 -0800 Subject: [PATCH 08/12] Remove unnecessary null initialized variables --- plugins/auto-sizes/includes/improve-calculate-sizes.php | 3 --- 1 file changed, 3 deletions(-) diff --git a/plugins/auto-sizes/includes/improve-calculate-sizes.php b/plugins/auto-sizes/includes/improve-calculate-sizes.php index a98f8c13aa..40c6bbf6d5 100644 --- a/plugins/auto-sizes/includes/improve-calculate-sizes.php +++ b/plugins/auto-sizes/includes/improve-calculate-sizes.php @@ -425,9 +425,6 @@ function auto_sizes_add_background_image_data_attributes( $content, array $parse $attrs = $parsed_block['attrs'] ?? array(); // Extract background image data based on block type. - $attachment_id = null; - $image_url = null; - if ( 'core/cover' === $block_name ) { $attachment_id = $attrs['id'] ?? null; $image_url = $attrs['url'] ?? null; From b0e53120991d21a2c9fc8e108c9c754c88c83a15 Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Thu, 26 Feb 2026 13:41:16 -0800 Subject: [PATCH 09/12] Remove unused data-bg-original-url attribute Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- plugins/auto-sizes/includes/improve-calculate-sizes.php | 1 - 1 file changed, 1 deletion(-) diff --git a/plugins/auto-sizes/includes/improve-calculate-sizes.php b/plugins/auto-sizes/includes/improve-calculate-sizes.php index 40c6bbf6d5..b2d306ca45 100644 --- a/plugins/auto-sizes/includes/improve-calculate-sizes.php +++ b/plugins/auto-sizes/includes/improve-calculate-sizes.php @@ -457,7 +457,6 @@ function auto_sizes_add_background_image_data_attributes( $content, array $parse $style = $processor->get_attribute( 'style' ); if ( is_string( $style ) && str_contains( $style, 'background-image:' ) && str_contains( $style, $image_url ) ) { $processor->set_attribute( 'data-bg-attachment-id', (string) $attachment_id ); - $processor->set_attribute( 'data-bg-original-url', $image_url ); return $processor->get_updated_html(); } } From d97926baf0371bf4745d9ca7d7d18bab3af772e9 Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Thu, 26 Feb 2026 13:50:09 -0800 Subject: [PATCH 10/12] Auto-sizes: Refactor background image data attribute function to simplify return logic Consolidate multiple return statements into a single return at the end of auto_sizes_add_background_image_data_attributes(), keeping only the initial guard clause. Co-authored-by: gemini-cli <176961590+gemini-code-assist[bot]@users.noreply.github.com> --- .../includes/improve-calculate-sizes.php | 38 +++++++++---------- 1 file changed, 18 insertions(+), 20 deletions(-) diff --git a/plugins/auto-sizes/includes/improve-calculate-sizes.php b/plugins/auto-sizes/includes/improve-calculate-sizes.php index b2d306ca45..e55c3882d4 100644 --- a/plugins/auto-sizes/includes/improve-calculate-sizes.php +++ b/plugins/auto-sizes/includes/improve-calculate-sizes.php @@ -421,8 +421,10 @@ function auto_sizes_add_background_image_data_attributes( $content, array $parse return ''; } - $block_name = $parsed_block['blockName'] ?? ''; - $attrs = $parsed_block['attrs'] ?? array(); + $block_name = $parsed_block['blockName'] ?? ''; + $attrs = $parsed_block['attrs'] ?? array(); + $attachment_id = null; + $image_url = null; // Extract background image data based on block type. if ( 'core/cover' === $block_name ) { @@ -431,8 +433,6 @@ function auto_sizes_add_background_image_data_attributes( $content, array $parse } elseif ( 'core/group' === $block_name ) { $attachment_id = $attrs['style']['background']['backgroundImage']['id'] ?? null; $image_url = $attrs['style']['background']['backgroundImage']['url'] ?? null; - } else { - return $content; } // Normalize attachment ID type if possible. @@ -440,24 +440,22 @@ function auto_sizes_add_background_image_data_attributes( $content, array $parse $attachment_id = (int) $attachment_id; } - // Validate extracted data. + // Validate extracted data and update the element with background image. if ( - ! isset( $attachment_id, $image_url ) || - ! is_int( $attachment_id ) || - $attachment_id <= 0 || - '' === $image_url || - ! is_array( wp_get_attachment_metadata( $attachment_id ) ) + isset( $attachment_id, $image_url ) && + is_int( $attachment_id ) && + $attachment_id > 0 && + '' !== $image_url && + is_array( wp_get_attachment_metadata( $attachment_id ) ) ) { - return $content; - } - - // Find and update the element with background image. - $processor = new WP_HTML_Tag_Processor( $content ); - while ( $processor->next_tag() ) { - $style = $processor->get_attribute( 'style' ); - if ( is_string( $style ) && str_contains( $style, 'background-image:' ) && str_contains( $style, $image_url ) ) { - $processor->set_attribute( 'data-bg-attachment-id', (string) $attachment_id ); - return $processor->get_updated_html(); + $processor = new WP_HTML_Tag_Processor( $content ); + while ( $processor->next_tag() ) { + $style = $processor->get_attribute( 'style' ); + if ( is_string( $style ) && str_contains( $style, 'background-image:' ) && str_contains( $style, $image_url ) ) { + $processor->set_attribute( 'data-bg-attachment-id', (string) $attachment_id ); + $content = $processor->get_updated_html(); + break; + } } } From 5331e166fa1c98e826d40ee818926ff3b600edfc Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Thu, 26 Feb 2026 14:55:02 -0800 Subject: [PATCH 11/12] Update normalization logic to handle change to attribute order --- .../tests/class-optimization-detective-test-helpers.php | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/plugins/optimization-detective/tests/class-optimization-detective-test-helpers.php b/plugins/optimization-detective/tests/class-optimization-detective-test-helpers.php index 9ae47ada41..bc5b8384cb 100644 --- a/plugins/optimization-detective/tests/class-optimization-detective-test-helpers.php +++ b/plugins/optimization-detective/tests/class-optimization-detective-test-helpers.php @@ -317,10 +317,12 @@ static function ( $matches ) { // TODO: Once WP 6.7 is the minimum-supported version, replace this with WP_HTML_Tag_Processor::set_modifiable_text(). $buffer = preg_replace_callback( - '#()#s', + '#)#s', static function ( $matches ) { array_shift( $matches ); - list( $start_tag, $text, $end_tag ) = $matches; + list( $text, $end_tag ) = $matches; + + $start_tag = '