Changeset 48170 for trunk/src/wp-includes/media.php

Timestamp:

06/25/2020 06:43:25 PM (3 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.

File:

• trunk/src/wp-includes/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;
         }