Skip to content

Commit 8cf0377

Browse files
westonruterwestonruter
committed
Remove responsive image sizes computation
1 parent 5cb7165 commit 8cf0377

10 files changed

Lines changed: 22 additions & 68 deletions

File tree

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

Lines changed: 4 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -167,23 +167,11 @@ private function process_img( OD_HTML_Tag_Processor $processor, OD_Tag_Visitor_C
167167
$sizes = (string) preg_replace( '/^[ \t\f\r\n]*auto[ \t\f\r\n]*(,[ \t\f\r\n]*)?/i', '', $sizes );
168168
}
169169

170-
// Compute more accurate sizes when it isn't lazy-loaded and sizes=auto isn't taking care of it.
171-
if ( ! $is_lazy ) {
172-
$computed_sizes = $this->compute_sizes( $context );
173-
if ( count( $computed_sizes ) > 0 ) {
174-
$new_sizes = join( ', ', $computed_sizes );
175-
176-
// Preserve the original sizes as a fallback when URL Metrics are missing from one or more viewport group.
177-
// Note that when all groups are populated, the media features will span all possible viewport widths from
178-
// zero to infinity, so there is no need to include the original sizes since they will never match.
179-
if ( '' !== $sizes && ! $context->url_metric_group_collection->is_every_group_populated() ) {
180-
$new_sizes .= ", $sizes";
181-
}
182-
$sizes = $new_sizes;
183-
}
170+
if ( '' === trim( $sizes, " \t\f\r\n" ) ) {
171+
$processor->remove_attribute( 'sizes' );
172+
} else {
173+
$processor->set_attribute( 'sizes', $sizes );
184174
}
185-
186-
$processor->set_attribute( 'sizes', $sizes );
187175
}
188176

189177
$parent_tag = $this->get_parent_tag_name( $context );
@@ -412,38 +400,4 @@ private function sizes_attribute_includes_valid_auto( string $sizes_attr ): bool
412400
return 'auto' === $sizes_attr || str_starts_with( $sizes_attr, 'auto,' );
413401
}
414402
}
415-
416-
/**
417-
* Computes responsive sizes for the current element based on its boundingClientRect width captured in URL Metrics.
418-
*
419-
* @since 1.0.0
420-
*
421-
* @param OD_Tag_Visitor_Context $context Context.
422-
* @return non-empty-string[] Computed sizes.
423-
*/
424-
private function compute_sizes( OD_Tag_Visitor_Context $context ): array {
425-
$sizes = array();
426-
427-
$xpath = $context->processor->get_xpath();
428-
foreach ( $context->url_metric_group_collection as $group ) {
429-
// Obtain the maximum width that the image appears among all URL Metrics collected for this viewport group.
430-
$element_max_width = 0;
431-
foreach ( $group->get_xpath_elements_map()[ $xpath ] ?? array() as $element ) {
432-
$element_max_width = max( $element_max_width, $element->get_bounding_client_rect()['width'] );
433-
}
434-
435-
// Use the maximum width as the size for image in this breakpoint.
436-
if ( $element_max_width > 0 ) {
437-
$size = sprintf( '%dpx', $element_max_width );
438-
$media_feature = od_generate_media_query( $group->get_minimum_viewport_width(), $group->get_maximum_viewport_width() );
439-
if ( null !== $media_feature ) {
440-
// Note: The null case only happens when a site has filtered od_breakpoint_max_widths to be an empty array, meaning there is only one viewport group.
441-
$size = "$media_feature $size";
442-
}
443-
$sizes[] = $size;
444-
}
445-
}
446-
447-
return $sizes;
448-
}
449403
}

‎plugins/image-prioritizer/readme.txt‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@ The current optimizations include:
2828
2. Implement lazy loading of CSS background images added via inline `style` attributes.
2929
3. Lazy-load `VIDEO` tags by setting the appropriate attributes based on whether they appear in the initial viewport. If a `VIDEO` is the LCP element, it gets `preload=auto`; if it is in an initial viewport, the `preload=metadata` default is left; if it is not in an initial viewport, it gets `preload=none`. Lazy-loaded videos also get initial `preload`, `autoplay`, and `poster` attributes restored when the `VIDEO` is going to enter the viewport.
3030
5. Responsive image sizes:
31-
1. Compute the `sizes` attribute using the widths of an image collected from URL Metrics for each breakpoint (when not lazy-loaded since then handled by `sizes=auto`).
32-
2. Ensure [`sizes=auto`](https://make.wordpress.org/core/2024/10/18/auto-sizes-for-lazy-loaded-images-in-wordpress-6-7/) is set on `IMG` tags after setting correct lazy-loading (above).
31+
1. Ensure [`sizes=auto`](https://make.wordpress.org/core/2024/10/18/auto-sizes-for-lazy-loaded-images-in-wordpress-6-7/) is set on `IMG` tags after setting correct lazy-loading (above).
32+
2. ~~Compute the `sizes` attribute using the widths of an image collected from URL Metrics for each breakpoint (when not lazy-loaded since then handled by `sizes=auto`).~~ (This has been removed due to an [issue](https://github.com/WordPress/performance/issues/2098); use [Enhanced Responsive Images instead](https://wordpress.org/plugins/auto-sizes/).)
3333
6. Reduce the size of the `poster` image of a `VIDEO` from full size to the size appropriate for the maximum width of the video (on desktop).
3434

3535
**This plugin requires the [Optimization Detective](https://wordpress.org/plugins/optimization-detective/) plugin as a dependency.** Please refer to that plugin for additional background on how this plugin works as well as additional developer options.

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

Lines changed: 5 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎plugins/image-prioritizer/tests/test-cases/only-mobile-and-desktop-groups-are-populated/expected.html‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎plugins/image-prioritizer/tests/test-cases/picture-element-as-lcp-tablet-and-desktop-metrics-missing/expected.html‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎plugins/image-prioritizer/tests/test-cases/picture-element-with-lcp-image-and-fully-populated-sample-data/expected.html‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎plugins/image-prioritizer/tests/test-cases/picture-element-with-source-having-media-attribute/expected.html‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎plugins/image-prioritizer/tests/test-cases/picture-element-with-source-missing-type-attribute/expected.html‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)