Largeur / hauteur de l'image en tant qu'attribut ou en CSS?

Question

Quelle est la "bonne" méthode sémantique pour spécifier la hauteur et la largeur de l'image? En CSS ...

 width:15px;
 

ou en ligne ...

 <img width="15"
 

?

CSS semble être le bon endroit pour mettre des informations visuelles. D'autre part, peu de gens diraient que l'image "src" ne devrait pas être spécifiée en tant qu'attribut et que la hauteur / largeur semble être aussi liée aux données d'image binaire que le "src".

(Oui, je réalise que du point de vue technique, l'utilisateur final n'a pas d'importance.)

Answer 1

Il doit être défini en ligne. Si vous utilisez la balise img, que l'image doit avoir une valeur sémantique du contenu, c'est pourquoi l'attribut alt est obligatoire pour la validation.

Si l'image est de faire partie de la mise en page ou d'un modèle, vous devez utiliser une balise autre que la balise img et affecter l'image en tant que fond de CSS de l'élément. Dans ce cas, l'image n'a pas de sens sémantique et, par conséquent, ne nécessite pas l'attribut alt. Je suis assez certain que la plupart des lecteurs d'écran ne serait pas savoir qu'une image CSS existe.

Answer 2

Je pense que tout dépend de ce que vous êtes à l'aide de l'attribut. Si vous êtes le style de plusieurs images dans une liste ou une table de manière à présenter correctement, puis mettre de la largeur ou de la hauteur dans votre CSS pour éviter la nécessité d'ajouter un autre ensemble de mots-clés à chaque image dans la liste. Utilisez quelque chose comme

ul.gallery img: { width:117px; } 

D'autre part, si vous insérez une image dans certains contenu , et elle doit être d'une certaine taille pour rendre le flux de documents correctement, puis le mettre dans le HTML. De cette façon, vous n'avez pas à nettoyer la feuille de style pour chaque image dans le html. Et de cette façon, si vous modifiez le contenu d'une autre image, de supprimer l'image, tous ensemble, vous n'avez pas de restes de code dispersés dans votre CSS à vous rappeler de le supprimer.

Answer 3

La hauteur et la largeur doivent être inclus dans le code HTML. La raison en est qu'il crée de l'espacement sur la page. Si, pour quelque raison que ce soit l'img ne parvient pas à charger (et vous avez été un bon garçon et inclus un alt..le navigateur va afficher cette image (à l'aide de w et h) avec la touche alt à l'intérieur.

Le principal avantage de la raison est la prévention de la "pop". Lorsqu'un navigateur charge la page, parfois plus gros, des aspects tels que img prendre plus de temps à charger, et si vous n'avez pas spécifié le w et h dans le HTML, le navigateur va temporairement réduire cette zone de la pensée de ses pas. Puis, quand enfin les charges de tout ce qui apparaît dans un lieu approprié.

Ceci est particulièrement gênant, mais encore assez ennuyeux sur un ordinateur, parce que vous allez cliquer sur un lien et tout d'un coup, la page se déplace vers le bas et vous avez accidentellement cliqué sur le mauvais lien.

Answer 4

Je dirais CSS.

Le HTML concerne le contenu,
CSS est sur la présentation.

Answer 5

Je dirais HTML.

Les attributs width et height sont utilisés pour arrêter le chargement de la page et de la croissance dans un disjoints.

Si vous avez déjà été la lecture d'un bloc de texte sur une page seulement de l'avoir poussé vers le bas grâce à la fin du chargement de l'image ci-dessus, vous savez combien il est frustrant!
L'ajout d'un ID à chaque image, juste pour préciser sa largeur et sa hauteur serait ridicule et juste presque comme une malpropre que l'ajout de deux largeur/hauteur attributs de toute façon.

Le hic, c'est Firefox de ne pas utiliser les attributs width et height pour réserver les images de l'espace cependant, Im surpris qu'ils n'ont pas mis à jour, en fait.