Images are incorrect sizes when LazyLoad is active

The LazyLoad feature uses an SVG placeholder before the actual image loads. In some cases, this placeholder can interfere with how browsers apply CSS sizing rules.

When this happens, the images may appear to be the wrong size unless the window is resized. 

To solve this problem, you'd need to change the placeholder used for the LazyLoad feature. You do this by using a helper plugin or a custom snippet as shown below.

Solution using a helper plugin

Install and activate the following helper plugin:

📥 Download (.zip): WP Rocket - Custom LazyLoad Placeholder
Developers: You can find the code for this plugin on GitHub.

Solution using a code snippet

Alternatively, you can add the following code snippet to your site:

function custom_wpr_lazyload_placeholder() {
    return 'data:image/gif;base64,R0lGODdhAQABAPAAAP///wAAACwAAAAAAQABAEACAkQBADs=';
} 
add_filter( 'rocket_lazyload_placeholder', 'custom_wpr_lazyload_placeholder' );

You can add this in the functions.php of your child theme, a custom functionality plugin, or a code snippet manager as shown here.

Clear the cache after adding the snippet.