Skip to content

Commit f5e4231

Browse files
westonruterwestonruter
committed
Remove sizes=auto if Image Prioritizer removed lazy-loading
1 parent b485b35 commit f5e4231

File tree

2 files changed

+31
-6
lines changed

2 files changed

+31
-6
lines changed

‎plugins/auto-sizes/optimization-detective.php

+16-2
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,27 @@ function auto_sizes_visit_tag( OD_Tag_Visitor_Context $context ): bool {
2424
}
2525

2626
$sizes = $context->processor->get_attribute( 'sizes' );
27-
if ( ! is_string( $sizes ) || 'lazy' !== $context->processor->get_attribute( 'loading' ) ) {
27+
if ( ! is_string( $sizes ) ) {
2828
return false;
2929
}
3030

3131
$sizes = preg_split( '/\s*,\s*/', $sizes );
32-
if ( is_array( $sizes ) && ! in_array( 'auto', $sizes, true ) ) {
32+
if ( ! is_array( $sizes ) ) {
33+
return false;
34+
}
35+
36+
$is_lazy_loaded = ( 'lazy' === $context->processor->get_attribute( 'loading' ) );
37+
$has_auto_sizes = in_array( 'auto', $sizes, true );
38+
39+
$changed = false;
40+
if ( $is_lazy_loaded && ! $has_auto_sizes ) {
3341
array_unshift( $sizes, 'auto' );
42+
$changed = true;
43+
} elseif ( ! $is_lazy_loaded && $has_auto_sizes ) {
44+
$sizes = array_diff( $sizes, array( 'auto' ) );
45+
$changed = true;
46+
}
47+
if ( $changed ) {
3448
$context->processor->set_attribute( 'sizes', join( ', ', $sizes ) );
3549
}
3650

‎plugins/auto-sizes/tests/test-optimization-detective.php

+15-4
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ public function test_auto_sizes_register_tag_visitors(): void {
3939
public function data_provider_test_od_optimize_template_output_buffer(): array {
4040
return array(
4141
// Note: The Image Prioritizer plugin removes the loading attribute, and so then Auto Sizes does not then add sizes=auto.
42-
'wrongly_lazy_responsive_img' => array(
42+
'wrongly_lazy_responsive_img' => array(
4343
'element_metrics' => array(
4444
'xpath' => '/*[1][self::HTML]/*[2][self::BODY]/*[1][self::IMG]',
4545
'isLCP' => false,
@@ -49,7 +49,7 @@ public function data_provider_test_od_optimize_template_output_buffer(): array {
4949
'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">',
5050
),
5151

52-
'non_responsive_image' => array(
52+
'non_responsive_image' => array(
5353
'element_metrics' => array(
5454
'xpath' => '/*[1][self::HTML]/*[2][self::BODY]/*[1][self::IMG]',
5555
'isLCP' => false,
@@ -59,7 +59,7 @@ public function data_provider_test_od_optimize_template_output_buffer(): array {
5959
'expected' => '<img src="https://example.com/foo.jpg" alt="Quux" width="1200" height="800" loading="lazy">',
6060
),
6161

62-
'auto_sizes_added' => array(
62+
'auto_sizes_added' => array(
6363
'element_metrics' => array(
6464
'xpath' => '/*[1][self::HTML]/*[2][self::BODY]/*[1][self::IMG]',
6565
'isLCP' => false,
@@ -69,7 +69,7 @@ public function data_provider_test_od_optimize_template_output_buffer(): array {
6969
'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">',
7070
),
7171

72-
'auto_sizes_already_added' => array(
72+
'auto_sizes_already_added' => array(
7373
'element_metrics' => array(
7474
'xpath' => '/*[1][self::HTML]/*[2][self::BODY]/*[1][self::IMG]',
7575
'isLCP' => false,
@@ -78,6 +78,17 @@ public function data_provider_test_od_optimize_template_output_buffer(): array {
7878
'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">',
7979
'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">',
8080
),
81+
82+
// 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.
83+
'wrongly_auto_sized_responsive_img' => array(
84+
'element_metrics' => array(
85+
'xpath' => '/*[1][self::HTML]/*[2][self::BODY]/*[1][self::IMG]',
86+
'isLCP' => false,
87+
'intersectionRatio' => 1,
88+
),
89+
'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">',
90+
'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">',
91+
),
8192
);
8293
}
8394

0 commit comments

Comments
 (0)