web-dev-qa-db-fra.com

Confus au sujet des attributs manquants de largeur et / ou de hauteur

J'ai donc testé mon site sur https://gtmetrix.com et il a déclaré:

The following image(s) are missing width and/or height attributes.

Cela me laisse perplexe, car les images elles-mêmes ont déjà la largeur et la hauteur correctes. Alors, pourquoi voudrais-je ajouter ces attributs?

imagesperformanceoptimizationtestingload-time
1
William Edwards

L'ajout des attributs height et width à votre balise HTML IMG SRC permet au navigateur de savoir combien d'espace il reste pour une image. Sans ces valeurs, le navigateur ne laisse aucune image à l'image avant son chargement, ce qui signifie que tout ce qui entoure l'image est ajusté une fois l'image chargée. http://www.computerhope.com/issues/ch001158.htm

5
user29671

Le navigateur demande ceci pour la performance. Supposons que vous ayez un paragraphe de texte avec une image de 100x100 pixels dans le coin supérieur gauche.

  • Navigateur construit la page, pas d'image pour le moment, donc il la construit avec juste du texte
  • L'image se charge maintenant, et soudain il y a de la place
  • Navigateur reconstruit la page, avec la salle appropriée pour l'image

Si vous donnez de la largeur et de la hauteur à l'image, ça se passe comme ça:

  • Navigateur construit la page, pas d'image pour le moment, mais a une taille, il est donc construit avec le bon jeu.
  • L'image est maintenant chargée, placez-la dans le support réservé

Cela sauve la reconstruction. Une reconstruction prend un peu de temps, ce qui peut être observé sur les appareils mobiles. Cela coûte aussi un peu de performances, de mémoire et de CPU, qui sont limitées sur les appareils mobiles. Dans l'exemple ci-dessus, il ne s'agit que d'une image, mais lorsque vous avez 20 images, vous le remarquerez.

La difficulté réside dans le fait que vous souhaitiez également être réactif. Parfois, il n'est pas très confortable d'ajouter une taille. J'ai tendance à ajouter autant que je peux sans me limiter (par exemple, parfois seulement une hauteur/largeur, parfois aucune).

4
Martijn

Le message...

The following image(s) are missing width and/or height attributes.

... signifie que la balise image doit avoir des valeurs assignées à width et height qui sont ensuite utilisées pour construire un espace réservé jusqu'à ce que l'image soit chargée.

Votre code HTML pour votre image est probablement similaire à ceci:

Pour résoudre ce problème HTML, utilisez le code HTML suivant pour votre image:

<img src="whatever.jpg" alt="picture of something" width="xxx" height="yyy">

Remplacez xxx et yyy par la largeur et la hauteur réelles de l'image en pixels. Si vous utilisez des valeurs incorrectes ou si vous les omettez, le navigateur se redessinera davantage, ce qui, en termes simples, signifie un peu plus de temps d'attente pour le chargement complet de la page.

Si vous essayez d’ajuster l’image pour une conception adaptative et que vous acceptez l’utilisation de Javascript, utilisez-la pour créer une balise d’image et définir les propriétés de l’image, y compris la taille, puis associez-la à un autre élément à l’écran. . Voici un code pour vous aider à démarrer:

<div ID="box"></div>
<script type="text/javascript">
mywidth=100; 
myheight=100;
mypicture="some_image.jpg";
mainbox=document.getElementById('box');
i=document.createElement('IMG');
i.style.width=mywidth+"px";
i.style.height=myheight+"px";
i.src=mypicture;
i.alt="picture";
mainbox.appendChild(i);
</script>

Il suffit de remplacer les valeurs de mypicture, mywidth et myheight par l'URL de l'image réelle elle-même, ainsi que la largeur et la hauteur correctes de l'image.

0
Mike