New to the community? Start here

[Smush Pro] Preventing Content Reflow From Lazy-Loaded Images

0

By replacing the placeholder gif with a svg and adding width and height to the viewBox, content jumps could be prevented.
As described in:

https://css-tricks.com/preventing-content-reflow-from-lazy-loaded-images/#we-have-a-winner

As for example autoptimize:

https://plugins.trac.wordpress.org/browser/autoptimize/trunk/classes/autoptimizeImages.php#L924

Thu, 8 Apr 2021 11:14:20
More Smush Pro discussions
Smush Pro
  • Anton Vanyukov
    • Ex Staff

    Hi Thomas Schiwiora ,

    True. This is a problem with lazy loading and images without sizes. WordPress is improving this functionality in Gutenberg, and I’m sure more themes and frameworks will not be too far behind.

    As an alternative, you can minimize the reflow, by adding the following CSS:

    .lazyload, .lazyloading {
	min-height: 200px;
}

    Best regards,
    Anton

      • Anton Vanyukov
        • Ex Staff

        WordPress 5.5 and higher should auto add those attributes automatically. Or on previous versions there’s this filter that can be hooked into:

        /**
 * Filters the list of attachment image attributes.
 *
 * since 2.8.0
 *
 * param string[]     $attr       Array of attribute values for the image markup, keyed by attribute name.
 *                                 See wp_get_attachment_image().
 * param WP_Post      $attachment Image attachment post.
 * param string|int[] $size       Requested image size. Can be any registered image size name, or
 *                                 an array of width and height values in pixels (in that order).
 */
$attr = apply_filters( 'wp_get_attachment_image_attributes', $attr, $attachment, $size );

        Best regards,
        Anton