Communication de la taille de l'image, meilleure pratique
Si vous développez un document html en respectant scrupuleusement les meilleures pratiques actuelles en matière de style, comment communiquez-vous le mieux la taille des images?
L'ancienne meilleure pratique veut une hauteur et une largeur d'image avec l'image en ce sens que le rendu sera plus rapide que le navigateur, en attendant que l'image soit téléchargée pour obtenir ses dimensions. Mais cela semble aller à l'encontre du style d'isolation du document.
Ajouter un attribut id à chaque image et mettre la hauteur/largeur dans le css? Est-ce que cela annule le bonus de rendu de la hauteur et de la largeur de l'image intégrée?
Avoir la largeur et la hauteur dans l'élément IMG n'est pas obsolète, c'est certainement le meilleur moyen d'indiquer au navigateur la largeur et la hauteur d'une image. Sortir de votre façon de le faire d'une autre manière est redondant et inutile (et peut-être stupide). Ne faites pas de travail inutile pour vous-même ou le navigateur. S'en tenir aux bases qui fonctionnent.
La réponse de John Conde est parfaite. Les images ont une largeur et une hauteur - cela fait partie de leur conten, pas de leur style. Donc, il n'est pas nécessaire de faire une "séparation" ici.
Cependant, une exception: CSS pour les dimensions d’image est utile si vous avez plusieurs images de la même taille (par exemple, des vignettes). Ici, il est bien mieux d’utiliser une classe CSS pour réduire le code HTML et accélérer le développement.
Pour la conception d'un site Web, y compris les boutons et les icônes, la meilleure solution consiste à utiliser des sprites CSS.