Images are incorrect sizes when LazyLoad is active

Sometimes there can be a conflict between the SVG placeholder used for LazyLoad and the way the browser handles CSS rules that are sizing the images. Images may appear to be the wrong size unless the window is resized. 

The solution is to change the placeholder used for LazyLoad. You do this by adding the following code snippet to your site: https://pastebin.com/xw9aDXDB

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 code snippet manager:
https://docs.wp-rocket.me/article/1332-add-code-snippets

Clear the cache after adding the snippet.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.