Ajouter les dimensions d'image manquantes
🚀 Depuis WP Rocket version 3.8 depuis l'onglet Média
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 ont les conditions suivantes:
- Contiennent un attribut
srcmais sans les attributswidthouheight. - Sont accessibles (c'est-Ă -dire qu'il n'y a pas d'erreur
404). - Sont hébergés sur votre domaine.
- Nous obtenons la taille de l'image en utilisant la fonction PHP
getimagesizeet ajoutons des attributs largeur / hauteur en utilisant ces valeurs.
Les éléments suivants seront exclus:
- Images possédant l'un des attributs suivants :
data-lazy-original,data-no-image-dimensions - Image faisant partie d'une balise
picture - SVGs
- Images hébergées sur des domaines externes
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" >