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.

Built from https://develop.svn.wordpress.org/trunk@48170


git-svn-id: http://core.svn.wordpress.org/trunk@47939 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/media.php

@@ -1495,6 +1495,7 @@ function wp_calculate_image_sizes( $size, $image_src = null, $image_meta = null,
  * Adds 'srcset' and 'sizes' attributes to an existing 'img' element.
  *
  * @since 4.4.0
+ * @since 5.5.0 `width` and `height` are now added if not already present.
  *
  * @see wp_calculate_image_srcset()
  * @see wp_calculate_image_sizes()
@@ -1525,6 +1526,8 @@ function wp_image_add_srcset_and_sizes( $image, $image_meta, $attachment_id ) {
 		return $image;
 	}
 
+	$attr = '';
+
 	$width  = preg_match( '/ width="([0-9]+)"/', $image, $match_width ) ? (int) $match_width[1] : 0;
 	$height = preg_match( '/ height="([0-9]+)"/', $image, $match_height ) ? (int) $match_height[1] : 0;
 
@@ -1547,12 +1550,15 @@ function wp_image_add_srcset_and_sizes( $image, $image_meta, $attachment_id ) {
 				}
 			}
 		}
-	}
 
 		if ( ! $width || ! $height ) {
 			return $image;
 		}
 
+		// Add width and height if not present.
+		$attr .= ' ' . trim( image_hwstring( $width, $height ) );
+	}
+
 	$size_array = array( $width, $height );
 	$srcset     = wp_calculate_image_srcset( $size_array, $image_src, $image_meta, $attachment_id );
 
@@ -1567,19 +1573,21 @@ function wp_image_add_srcset_and_sizes( $image, $image_meta, $attachment_id ) {
 
 	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 );
 	}
 
+	if ( empty( $attr ) ) {
 		return $image;
 	}
 
+	// Add extra attributes to the image markup.
+	return preg_replace( '/<img ([^>]+?)[\/ ]*>/', '<img $1' . $attr . ' />', $image );
+}
+
 /**
  * Determine whether to add the `loading` attribute to the specified tag in the specified context.
  *
@@ -1714,6 +1722,12 @@ function wp_img_tag_add_loading_attr( $image, $context ) {
 			$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;
+		}
+
 		$quote = null;
 
 		// Check if the img tag is valid (has `src` attribute) and get the quote character.

wp-includes/version.php

@@ -13,7 +13,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.5-alpha-48169';
+$wp_version = '5.5-alpha-48170';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.