Ajouter les dimensions d'image manquantes

🚀 Depuis WP Rocket 3.8 dans 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 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-lazy-originaldata-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" >

Cela a-t-il répondu à votre question ? Merci pour votre retour :) Une erreur est survenue lors de l’envoi de votre retour. Veuillez réessayer plus tard.