Changeset 48170

Timestamp:

06/25/2020 06:43:25 PM (4 years ago)

Author:

flixos90

Message:

Media: Ensure images have dimensions to reduce layout shift and facilitate lazy-loading.

This changeset ensures that attachment images which are inserted without width and height attributes still receive them in the frontend, to reduce cumulative layout shift. Adding the dimensions happens as part of the logic for adding srcset and sizes attributes, which already assume the specific width and height of the respective image.

Images are now only lazy-loaded if they have width and height attributes present. While missing these attributes itself is what causes layout shifts, lazy-loading such images can make this problem more apparent to the user.

Props adamsilverstein, westonruter.
Fixes #50367. See #44427.

Location:

trunk

Files:

• src/wp-includes/media.php (modified) (5 diffs)
• tests/phpunit/tests/media.php (modified) (5 diffs)

trunk/src/wp-includes/media.php

@@ -1496 +1496 @@
  *
  * @since 4.4.0
+ * @since 5.5.0 `width` and `height` are now added if not already present.
  *
  * @see wp_calculate_image_srcset()
@@ -1525 +1526 @@
         return $image;
     }
+
+    $attr = '';
 
     $width  = preg_match( '/ width="([0-9]+)"/', $image, $match_width ) ? (int) $match_width[1] : 0;
@@ -1548 +1551 @@
             }
         }
-    }
-
-    if ( ! $width || ! $height ) {
-        return $image;
+
+        if ( ! $width || ! $height ) {
+            return $image;
+        }
+
+        // Add width and height if not present.
+        $attr .= ' ' . trim( image_hwstring( $width, $height ) );
     }
 
@@ -1568 +1574 @@
     if ( $srcset && $sizes ) {
         // Format the 'srcset' and 'sizes' string and escape attributes.
-        $attr = sprintf( ' srcset="%s"', esc_attr( $srcset ) );
+        $attr .= sprintf( ' srcset="%s"', esc_attr( $srcset ) );
 
         if ( is_string( $sizes ) ) {
             $attr .= sprintf( ' sizes="%s"', esc_attr( $sizes ) );
         }
-
-        // Add 'srcset' and 'sizes' attributes to the image markup.
-        $image = preg_replace( '/<img ([^>]+?)[\/ ]*>/', '<img $1' . $attr . ' />', $image );
-    }
-
-    return $image;
+    }
+
+    if ( empty( $attr ) ) {
+        return $image;
+    }
+
+    // Add extra attributes to the image markup.
+    return preg_replace( '/<img ([^>]+?)[\/ ]*>/', '<img $1' . $attr . ' />', $image );
 }
 
@@ -1713 +1721 @@
         if ( ! in_array( $value, array( 'lazy', 'eager' ), true ) ) {
             $value = 'lazy';
+        }
+
+        // Images should have dimension attributes for the `loading` attribute
+        // to be added.
+        if ( false === strpos( $image, ' width=' ) || false === strpos( $image, ' height=' ) ) {
+            return $image;
         }
 

trunk/tests/phpunit/tests/media.php

@@ -1964 +1964 @@
     /**
      * @ticket 33641
+     * @ticket 50367
      */
     function test_wp_filter_content_tags() {
@@ -1983 +1984 @@
         $img_html5            = str_replace( ' />', '>', $img );
 
+        $hwstring = image_hwstring( $size_array[0], $size_array[1] );
+
         // Manually add srcset and sizes to the markup from get_image_tag().
         $respimg                  = preg_replace( '|<img ([^>]+) />|', '<img $1 ' . $srcset . ' ' . $sizes . ' />', $img );
         $respimg_no_size_in_class = preg_replace( '|<img ([^>]+) />|', '<img $1 ' . $srcset . ' ' . $sizes . ' />', $img_no_size_in_class );
-        $respimg_no_width_height  = preg_replace( '|<img ([^>]+) />|', '<img $1 ' . $srcset . ' ' . $sizes . ' />', $img_no_width_height );
+        $respimg_no_width_height  = preg_replace( '|<img ([^>]+) />|', '<img $1 ' . $hwstring . $srcset . ' ' . $sizes . ' />', $img_no_width_height );
         $respimg_with_sizes_attr  = preg_replace( '|<img ([^>]+) />|', '<img $1 ' . $srcset . ' />', $img_with_sizes_attr );
         $respimg_xhtml            = preg_replace( '|<img ([^>]+)/>|', '<img $1 ' . $srcset . ' ' . $sizes . ' />', $img_xhtml );
@@ -1998 +2001 @@
             %2$s
 
-            <p>Image, no width and height attributes. Should have srcset and sizes (from matching the file name).</p>
+            <p>Image, no width and height attributes. Should have width, height, srcset and sizes (from matching the file name).</p>
             %3$s
 
@@ -2531 +2534 @@
     /**
      * @ticket 44427
+     * @ticket 50367
      */
     function test_wp_lazy_load_content_media() {
-        $img       = get_image_tag( self::$large_id, '', '', '', 'medium' );
-        $img_xhtml = str_replace( ' />', '/>', $img );
-        $img_html5 = str_replace( ' />', '>', $img );
-        $iframe    = '<iframe src="https://www.example.com"></iframe>';
+        $image_meta = wp_get_attachment_metadata( self::$large_id );
+        $size_array = $this->_get_image_size_array_from_meta( $image_meta, 'medium' );
+
+        $img                 = get_image_tag( self::$large_id, '', '', '', 'medium' );
+        $img_xhtml           = str_replace( ' />', '/>', $img );
+        $img_html5           = str_replace( ' />', '>', $img );
+        $img_no_width_height = str_replace( ' width="' . $size_array[0] . '"', '', $img );
+        $img_no_width_height = str_replace( ' height="' . $size_array[1] . '"', '', $img_no_width_height );
+        $iframe              = '<iframe src="https://www.example.com"></iframe>';
 
         $lazy_img       = wp_img_tag_add_loading_attr( $img, 'test' );
@@ -2552 +2561 @@
             <p>Image, HTML 5.0 style.</p>
             %3$s
-            <p>Image, with pre-existing "loading" attribute.</p>
+            <p>Image, with pre-existing "loading" attribute. Should not be modified.</p>
+            %4$s
+            <p>Image, without dimension attributes. Should not be modified.</p>
             %5$s
             <p>Iframe, standard. Should not be modified.</p>
-            %4$s';
-
-        $content_unfiltered = sprintf( $content, $img, $img_xhtml, $img_html5, $iframe, $img_eager );
-        $content_filtered   = sprintf( $content, $lazy_img, $lazy_img_xhtml, $lazy_img_html5, $iframe, $img_eager );
+            %6$s';
+
+        $content_unfiltered = sprintf( $content, $img, $img_xhtml, $img_html5, $img_eager, $img_no_width_height, $iframe );
+        $content_filtered   = sprintf( $content, $lazy_img, $lazy_img_xhtml, $lazy_img_html5, $img_eager, $img_no_width_height, $iframe );
 
         // Do not add srcset and sizes.