Les images sont de taille incorrecte lorsque le LazyLoad est actif

La fonctionnalité LazyLoad utilise un placeholder SVG avant le chargement de l'image réelle. Dans certains cas, ce placeholder peut interférer avec la façon dont les navigateurs appliquent les règles de dimensionnement CSS.

Lorsque cela se produit, les images peuvent sembler avoir une mauvaise taille tant que la fenêtre du navigateur n'est pas redimensionnée. 

Pour résoudre ce problème, vous devez modifier le placeholder utilisé par la fonctionnalité LazyLoad. Vous pouvez le faire en utilisant une extension ou un extrait de code personnalisé, comme indiqué ci-dessous.

Solution avec une extension

Installez et activez l'extension d'aide suivante :

📥 Téléchargement (.zip) : WP Rocket - Custom LazyLoad Placeholder
Développeurs : Vous trouverez le code de cette extension sur GitHub.

Solution avec un extrait de code

Vous pouvez également ajouter l'extrait de code suivant à votre site :

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

Vous pouvez ajouter ce code dans le fichier functions.php de votre thème enfant, dans une extension de fonctionnalités personnalisées, ou via un gestionnaire d'extraits de code comme indiqué ici.

Videz le cache après avoir ajouté l'extrait de code.