WordPress.org

Make WordPress Core


Ignore:
Timestamp:
06/25/2020 06:43:25 PM (7 weeks 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:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/media.php

    r48110 r48170  
    14961496 *
    14971497 * @since 4.4.0
     1498 * @since 5.5.0 `width` and `height` are now added if not already present.
    14981499 *
    14991500 * @see wp_calculate_image_srcset()
     
    15251526        return $image;
    15261527    }
     1528
     1529    $attr = '';
    15271530
    15281531    $width  = preg_match( '/ width="([0-9]+)"/', $image, $match_width ) ? (int) $match_width[1] : 0;
     
    15481551            }
    15491552        }
    1550     }
    1551 
    1552     if ( ! $width || ! $height ) {
    1553         return $image;
     1553
     1554        if ( ! $width || ! $height ) {
     1555            return $image;
     1556        }
     1557
     1558        // Add width and height if not present.
     1559        $attr .= ' ' . trim( image_hwstring( $width, $height ) );
    15541560    }
    15551561
     
    15681574    if ( $srcset && $sizes ) {
    15691575        // Format the 'srcset' and 'sizes' string and escape attributes.
    1570         $attr = sprintf( ' srcset="%s"', esc_attr( $srcset ) );
     1576        $attr .= sprintf( ' srcset="%s"', esc_attr( $srcset ) );
    15711577
    15721578        if ( is_string( $sizes ) ) {
    15731579            $attr .= sprintf( ' sizes="%s"', esc_attr( $sizes ) );
    15741580        }
    1575 
    1576         // Add 'srcset' and 'sizes' attributes to the image markup.
    1577         $image = preg_replace( '/<img ([^>]+?)[\/ ]*>/', '<img $1' . $attr . ' />', $image );
    1578     }
    1579 
    1580     return $image;
     1581    }
     1582
     1583    if ( empty( $attr ) ) {
     1584        return $image;
     1585    }
     1586
     1587    // Add extra attributes to the image markup.
     1588    return preg_replace( '/<img ([^>]+?)[\/ ]*>/', '<img $1' . $attr . ' />', $image );
    15811589}
    15821590
     
    17131721        if ( ! in_array( $value, array( 'lazy', 'eager' ), true ) ) {
    17141722            $value = 'lazy';
     1723        }
     1724
     1725        // Images should have dimension attributes for the `loading` attribute
     1726        // to be added.
     1727        if ( false === strpos( $image, ' width=' ) || false === strpos( $image, ' height=' ) ) {
     1728            return $image;
    17151729        }
    17161730
Note: See TracChangeset for help on using the changeset viewer.