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 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

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