Should image size be defined in the img tag height/width attributes or in CSS?

肯定不是两者兼有。除此之外，我不得不说这是个人偏好。如果我有许多同样大小的图片，我会使用 css 来减少代码。

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

从长远来看，CSS 可能会胜出，因为 HTML 属性不再适用，而且更有可能是因为 SVG 等矢量图像格式的增长，在这些格式中，使用% 或 em 等非像素单位来缩放图像实际上是有意义的。

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

specifying width and height in the image tag is a good practice..this way when the page loads there is space allocated for the image and the layout does not suffer any jerks even if the image takes a long time to load.

虽然可以使用内联样式，但是在页面上包含一个外部 CSS 文件可能会更好地满足您的目的。这样你就可以定义一个图片类(比如“缩略图”、“照片”、“大图”等等)并给它分配一个固定的大小。这将有助于当您最终的图像需要相同的位置跨多个页面。

像这样:

In your header:
<link type="text/css" rel="stylesheet" href="css/style.css" />


Your HTML:
<img class="thumbnail" src="images/academia_vs_business.png" alt="" />


In css/style.css:
img.thumbnail {
width: 75px;
height: 75px;
}

但是，如果您想使用内联样式，最好使用 style 属性来设置宽度和高度，以保证可读性。

在标签中定义高度/宽度的历史原因是，这样浏览器甚至可以在加载 CSS 和/或图像资源之前调整页面中的实际 <img>元素的大小。如果不显式提供高度和宽度，则 <img>元素将呈现为0x0，直到浏览器可以根据文件调整其大小。当这种情况发生时，一旦图像加载，就会导致页面的可视化重流，如果页面上有多个图像，则会复合。通过高度/宽度调整 <img>的大小可以在页面流中创建正确大小的物理占位符，使您的内容可以异步加载，而不会影响用户体验。

另外，如果您正在进行移动响应设计(这是目前的最佳实践) ，则通常指定宽度(或最大宽度) 只有并将高度定义为 auto。这样，当你为不同的屏幕宽度定义媒体查询(例如 CSS)时，你可以简单地调整图片宽度，让浏览器来处理保持图片高度/长宽比正确的问题。这是一种中间立场的方法，因为你可能会得到一些回流，但它允许你支持广泛的屏幕尺寸，所以利大于弊。

最后，有时候您可能不知道图像的大小(图像 src可能是动态加载的，或者可以通过脚本在页面的生命周期中进行更改) ，在这种情况下，使用 CSS 只是有意义的。

底线是，你需要理解这些权衡，并决定哪种策略对你想要实现的目标最有意义。

选项 A。 简单直接的 fwd。你看到的是什么，你得到容易进行计算。

Option b. Too messy to do this inline unless you want to have a site that can stretch. IE if you used the with:86em however modern browsers seem to handle this functionally adequately for my purposes.. . Personally the only time that i would use something like this is if i were to create a thumbnails catalogue.

/*css*/
ul.myThumbs{}
ul.myThumbs li {float:left; width:50px;}
ul.myThumbs li img{width:50px; height:50px;border:0;}


<!--html-->
<ul><li>
<img src="~/img/products/thumbs/productid.jpg" alt="" />
</li></ul>

选项 c 太混乱而无法维护。