La taille de l'image doit-elle être définie dans les attributs hauteur / largeur du tag img ou en CSS?

Question

Est-il préférable de définir une taille d’image dans les attributs img balise width et height balise?

 <img src="images/academia_vs_business.png" width="740" height="382" alt="" />
 

Ou dans le style CSS avec largeur / hauteur?

 <img src="images/academia_vs_business.png" style="width:740px; height:382px;" alt="" />
 

Ou les deux?

 <img src="images/academia_vs_business.png" width="740" height="382" style="width:740px; height:382px" alt="" />
 

Answer 1

Je vais aller à contre courant ici et de l'état que le principe de la séparation du contenu et de la mise en page (ce qui permettrait de justifier les réponses qui propose l'utilisation de CSS) ne s'applique pas toujours à la hauteur de l'image et de la largeur. Chaque image a une caractéristique innée, l'original de la hauteur et la largeur qui peut être dérivée à partir des données de l'image. Dans le cadre de contenu vs mise en page, je dirais que ce dérivé de la hauteur et la largeur de l'information est le contenu, pas de mise en page, et doit donc être rendu au format HTML que les attributs de l'élément. C'est un peu comme l' alt de texte, qui peut aussi être dit pour être dérivée à partir de l'image. Ce soutient aussi l'idée que l'arbitraire d'un agent utilisateur (par exemple, un discours navigateur) doit disposer de cette information afin de la relier à l'utilisateur. Au moins, le ratio d'aspect pourrait s'avérer utile ("l'image a avec 15 et hauteur 200"). Ces agents utilisateurs ne seraient pas nécessairement processus de CSS.

La spécification dit que l' width et height attributs peuvent également être utilisés pour remplacer la hauteur et la largeur transmis dans le fichier d'image. Je ne dis pas qu'ils être utilisés pour cela. Pour remplacer la hauteur et la largeur, je crois (CSS inline, intégré ou externe) est la meilleure approche.

Donc, en fonction de ce que vous voulez faire, vous devez spécifier l'un et/ou l'autre. Je pense qu'idéalement, l'original de la hauteur et la largeur doit toujours être spécifié en tant que HTML, les attributs de l'élément, tandis que des informations sur le style devrait éventuellement être transmis dans les CSS.

Answer 2

La raison pour définir la hauteur / largeur dans les balises est que les navigateurs puissent dimensionner les éléments <img> réels de la page avant même que la ressource image ne soit réellement chargée (sinon, la page peut se refondre une fois le chargement terminé).

Cependant, il peut arriver que la taille de l'image ne soit pas définie à l'avance (src peut être chargé de manière dynamique ou une image peut changer au cours de la durée de vie de la page). Dans ce cas, l'utilisation de CSS est judicieuse.

Answer 3

Alors que c'est ok pour utiliser des styles en ligne, vos objectifs peuvent être mieux servis en incluant un fichier CSS externe sur la page. De cette façon, vous pouvez définir une classe de l'image (c'est à dire 'Vignette', 'Photo', 'Grande', etc) et lui attribuer une taille constante. Cela aidera lorsque vous vous retrouvez avec des images qui nécessitent le même placement sur plusieurs pages.

Comme ceci:

Dans votre en-tête:
<link type="text/css" rel="stylesheet" href="css/style.css" />

Votre code HTML:
<img class="vignette" src="images/academia_vs_business.png" alt="" />

Dans css/style.css:
img.miniature {
 width: 75px;
 height: 75px;
}

Si vous souhaitez utiliser des styles en ligne cependant, c'est probablement le meilleur pour définir la largeur et la hauteur à l'aide de l'attribut style dans un souci de lisibilité.

Answer 4

 <img id="uxcMyImageId" src"myImage" width="100" height="100" />
 

spécifier la largeur et la hauteur dans la balise image est une bonne pratique. De cette manière, lors du chargement de la page, un espace est alloué pour l'image et la mise en page ne subit aucune secousse, même si le chargement de l'image prend beaucoup de temps.

Answer 5

Certainement pas les deux. Autre que cela, je dois dire que c'est une préférence personnelle. J'utiliserais le CSS si j'avais plusieurs images de la même taille pour réduire le code.

 .my_images img {width: 20px; height:20px}
 

À long terme, CSS risque de l'emporter en raison de la dépréciation d'attributs HTML et plus probablement en raison de la croissance des formats d'images vectorielles tels que SVG, où il peut s'avérer judicieux de redimensionner les images à l'aide d'unités non pixels telles que% ou em.