Ajouter les dimensions d'image manquantes

Comment cette option aide-t-elle ?

Lorsqu'un navigateur affiche une page web, il charge d'abord le code HTML et attend que les images soient téléchargées. Si les valeurs de largeur ( width) et de hauteur ( height) sont disponibles, le navigateur peut utiliser ces informations pour réserver l'espace nécessaire pour les images sur la page.

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 attributs width ou height.
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.

Les éléments suivants seront exclus :

Images avec les valeurs width="auto" ou height="auto"
Images avec width ou height ajoutée deux fois, ex: width="100" width="100".
Images possédant l'un des attributs suivants : data-lazy-original, data-no-image-dimensions ou data-height-percentage
Image faisant partie d'une balise picture (veuillez consulter ce guide)
Images hébergées sur des domaines externes (veuillez consulter ce guide)
Images avec des chaînes de requête dans leurs URLs
Images qui sont ajoutées dynamiquement, c'est-à-dire des images qui ne sont pas présentes dans le code source de la page mais qui sont injectées dans le DOM ultérieurement.
Images encodées en Base64: <img src="data:image/png;base64, ...">

Exemple

Si vous avez une image sur votre site comme celle-ci :

<img src="https://www.example.com/wp-content/uploads/2020/12/image.jpg">

Admettons que l'image a des dimensions de 200 x 200. Le code de l'image deviendra :

<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