Reduce maximum image size used as background image based on container width by nani-samireddy · Pull Request #2258 · WordPress/performance

nani-samireddy · 2025-11-08T03:23:28Z

Summary

Relevant technical choices

This change exposes background image attachment IDs and original URLs from block attributes (core/group and core/cover) as data attributes on the rendered HTML element, and uses those attributes in Image Prioritizer to pick and serve a more appropriate-sized background image. It enables downsizing background images based on collected URL Metrics (preferring desktop metrics to avoid serving overly small images to desktop visitors).

Use of AI Tools

…ml tag attributes

…idth

… enhancement/reduce-maximum-image-size-used-as-background-image

codecov · 2025-11-08T03:35:24Z

Codecov Report

❌ Patch coverage is 89.15663% with 18 lines in your changes missing coverage. Please review.
✅ Project coverage is 70.70%. Comparing base (79e7ac7) to head (cf0d687).

Files with missing lines	Patch %	Lines
...ns/auto-sizes/includes/improve-calculate-sizes.php	89.77%	9 Missing ⚠️
...rioritizer-background-image-styled-tag-visitor.php	83.72%	7 Missing ⚠️
plugins/image-prioritizer/helper.php	91.30%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##            trunk    #2258      +/-   ##
==========================================
+ Coverage   70.35%   70.70%   +0.35%     
==========================================
  Files          91       91              
  Lines        7867     8023     +156     
==========================================
+ Hits         5535     5673     +138     
- Misses       2332     2350      +18

Flag	Coverage Δ
multisite	`70.70% <89.15%> (+0.35%)`	⬆️
single	`35.37% <43.37%> (+0.20%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

github-actions · 2025-11-08T06:48:41Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: nani-samireddy <nanisamireddy@git.wordpress.org>
Co-authored-by: westonruter <westonruter@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

…as-background-image

Updated the PHP docblock for clarity and consistency.

Copilot

Pull request overview

This PR implements background image size optimization for core/group and core/cover blocks by exposing attachment IDs as data attributes and using URL Metrics to serve appropriately-sized images based on container dimensions.

Changes:

Added auto_sizes_add_background_image_data_attributes function to extract and expose background image attachment IDs and URLs as data attributes on rendered HTML elements
Implemented reduce_background_image_size method in Image Prioritizer to downsize background images based on desktop viewport metrics
Registered new filter hooks for core/group and core/cover blocks at priority 5

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 5 comments.

File	Description
plugins/image-prioritizer/class-image-prioritizer-background-image-styled-tag-visitor.php	Added method to reduce background image sizes using attachment IDs from data attributes and URL Metrics
plugins/auto-sizes/includes/improve-calculate-sizes.php	Added function to extract background image data from block attributes and add as data attributes to HTML
plugins/auto-sizes/hooks.php	Registered filter hooks for core/group and core/cover blocks to add background image data attributes

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

…lify 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>

Consolidate duplicated logic for obtaining maximum element width into a protected method in the parent Image_Prioritizer_Tag_Visitor class. The new method returns null if the element is not found, providing a more robust check in subclasses. Co-authored-by: gemini-cli <176961590+gemini-code-assist[bot]@users.noreply.github.com>

… enhancement/reduce-maximum-image-size-used-as-background-image

westonruter

Sorry for the long delay in following up on this.

westonruter · 2026-02-26T23:22:44Z

+		// 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' );


There is a plugin dependency issue here. Currently this requires that the auto-sizes plugin be active in order for this attribute to be added. This dependency shouldn't exist. This attribute should be added in the Image Prioritizer plugin for its own use. If the Image Prioritizer plugin isn't active, then the auto-sizes plugin should be able to scale down the image all on its own because it has access to template layout information on its own. The Image Prioritizer implementation is a parallel one which will benefit sites without auto-sizes active, or sites which are using a classic theme in which case the layout information is not available.

westonruter · 2026-02-26T23:27:38Z

+		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 );


As noted below, this attribute is being added here exclusively for the use of another plugin: Image Prioritizer. This dependency needs to be removed. Instead, this needs to be determining the size of the block as informed by the layout it has access to based on the block structure on a block template.

In other words, I believe all of the logic here in auto_sizes_filter_render_block_context() needs to be re-factored into auto_sizes_filter_uses_context(), auto_sizes_filter_render_block_context(), and auto_sizes_filter_image_tag(), for example, to follow the pattern of how other blocks are currently handled.

westonruter · 2026-02-26T23:31:50Z

+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 );


Taking auto_sizes_filter_image_tag() for inspiration, something like:

Suggested change

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( 'render_block_core/group', 'auto_sizes_filter_background_image_style', 5, 2 );

add_filter( 'render_block_core/cover', 'auto_sizes_filter_background_image_style', 5, 2 );

A new auto_sizes_filter_background_image_style() function will be needed modeled after auto_sizes_filter_image_tag().

… enhancement/reduce-maximum-image-size-used-as-background-image

…ving attribute processing and metadata retrieval

nani-samireddy · 2026-08-06T19:23:24Z

@westonruter I made the updates to the PR.
Could you please take a look?

Copilot

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

Note

This error may be related to your runner configuration. You can now configure runners for Copilot code review separately from Copilot cloud agent by creating a copilot-code-review.yml file with your setup steps. Read the docs for details.

…as-background-image

nani-samireddy added 3 commits November 8, 2025 08:48

add: utility function to add attachment_id and original_url to the ht…

a985956

…ml tag attributes

enhancement: update the background image url based on the container w…

dfa6c45

…idth

Merge branch 'trunk' of github.com:nani-samireddy/wp-performance into…

5ed9644

… enhancement/reduce-maximum-image-size-used-as-background-image

nani-samireddy marked this pull request as ready for review November 8, 2025 06:48

nani-samireddy requested review from felixarntz, joemcgill, mukeshpanchal27 and westonruter as code owners November 8, 2025 06:48

nani-samireddy mentioned this pull request Nov 8, 2025

Reduce maximum image size used as background image based on container width #2216

Open

westonruter added this to the auto-sizes n.e.x.t milestone Jan 15, 2026

Merge branch 'trunk' into enhancement/reduce-maximum-image-size-used-…

ea61a9c

…as-background-image

westonruter changed the title ~~Enhancement: reduce maximum image size used as background image based on container width~~ Enhanced Responsive Images: Reduce maximum image size used as background image based on container width Jan 15, 2026

westonruter added 4 commits January 14, 2026 16:08

Add since tag

3fc31d1

Fix placement of since tag

134af1c

Updated the PHP docblock for clarity and consistency.

Add missing line break

cf42623

Fix indentation and add missing since tag

f49fdc6

westonruter added the [Plugin] Image Prioritizer Issues for the Image Prioritizer plugin (dependent on Optimization Detective) label Jan 15, 2026

westonruter changed the title ~~Enhanced Responsive Images: Reduce maximum image size used as background image based on container width~~ Reduce maximum image size used as background image based on container width Jan 15, 2026

westonruter requested a review from Copilot January 15, 2026 00:11

Copilot started reviewing on behalf of westonruter January 15, 2026 00:11 View session

Copilot AI reviewed Jan 15, 2026

View reviewed changes

westonruter and others added 3 commits February 26, 2026 13:38

Improve data validation

7748bca

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Remove unnecessary null initialized variables

119aded

Remove unused data-bg-original-url attribute

b0e5312

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

westonruter and others added 4 commits February 26, 2026 13:50

Update normalization logic to handle change to attribute order

5331e16

Merge branch 'trunk' of https://github.com/WordPress/performance into…

4c1d7f2

… enhancement/reduce-maximum-image-size-used-as-background-image

westonruter requested changes Feb 26, 2026

View reviewed changes

nani-samireddy added 2 commits August 6, 2026 23:52

Merge branch 'trunk' of github.com:nani-samireddy/wp-performance into…

3476a66

… enhancement/reduce-maximum-image-size-used-as-background-image

Reduce background image size for Group and Cover blocks

e519a3b

nani-samireddy requested review from westonruter and a lite review from Copilot August 6, 2026 18:55

Enhance background image handling for Group and Cover blocks by impro…

dc858d7

…ving attribute processing and metadata retrieval

Copilot AI reviewed Aug 6, 2026

Copilot started reviewing on behalf of nani-samireddy August 6, 2026 19:30 View session

Merge branch 'trunk' into enhancement/reduce-maximum-image-size-used-…

cf0d687

…as-background-image

Navigation Menu

Uh oh!

Reduce maximum image size used as background image based on container width - #2258

Reduce maximum image size used as background image based on container width#2258
nani-samireddy wants to merge 19 commits into
WordPress:trunkfrom
nani-samireddy:enhancement/reduce-maximum-image-size-used-as-background-image

nani-samireddy commented Nov 8, 2025 •

edited

Loading

Uh oh!

codecov Bot commented Nov 8, 2025 •

edited

Loading

Uh oh!

github-actions Bot commented Nov 8, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

westonruter left a comment

Uh oh!

westonruter Feb 26, 2026

Uh oh!

westonruter Feb 26, 2026

Uh oh!

westonruter Feb 26, 2026

Uh oh!

nani-samireddy commented Aug 6, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		// 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' );

		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 );

Uh oh!

Conversation

nani-samireddy commented Nov 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Relevant technical choices

Use of AI Tools

Uh oh!

codecov Bot commented Nov 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

github-actions Bot commented Nov 8, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

westonruter left a comment

Choose a reason for hiding this comment

Uh oh!

westonruter Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

westonruter Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

westonruter Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

nani-samireddy commented Aug 6, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

nani-samireddy commented Nov 8, 2025 •

edited

Loading

codecov Bot commented Nov 8, 2025 •

edited

Loading