Ajouter les dimensions d'image manquantes
Comment cette option aide-t-elle ?
Lorsque l'espace pour une image n'est pas réservé, le navigateur déplacera le contenu pour s'adapter à l'image une fois qu'elle est téléchargée. Ce changement de mise en page conduit à une mauvaise expérience pour l'utilisateur.
Cette fonctionnalité permet de répondre aux recommandations suivantes de GTmetrix et PageSpeed:
- Utiliser une largeur et une hauteur explicites sur les éléments image
- Cumulative layout shift
Comment ça marche ?
WP Rocket scanne le HTML pour trouver des images qui remplissent les conditions suivantes :
- Elles contiennent un attribut
src
mais sans les attributswidth
ouheight
. - Elles sont accessibles (c'est-à-dire qu'il n'y a pas d'erreur
404
). - Elles sont hébergées sur votre domaine
- Nous obtenons la taille de l'image en utilisant la fonction PHP
getimagesize
et ajoutons des attributs largeur / hauteur en utilisant ces valeurs.
- Images possédant l'un des attributs suivants :
data-original-height
,data-original-width
,data-lazy-original
,data-no-image-dimensions
,data-height-percentage
,data-actual-width
,data-actual-height
- Image faisant partie d'une balise
picture
(veuillez consulter ce guide) - SVGs
- Images hébergées sur des domaines externes (veuillez consulter ce guide)
- Images avec des chaînes de requête dans leurs URLs
Exemple
<img src="https://www.example.com/wp-content/uploads/2020/12/image.jpg">
<img width="200" height="200" src="https://www.example.com/wp-content/uploads/2020/12/image.jpg" >
Exclusion d'images
Si cette fonction pose des problèmes, veuillez consulter ce guide pour exclure des images spécifiques : Désactiver les dimensions d'image manquantes sur des images spécifiques