很久以前，当我第一次学习 HTML 时，有人告诉我，始终在 HTML 中设置图像的尺寸很重要，这样浏览器就可以在图像应该去的地方绘制一个空框，呈现你的页面，然后下载并渲染它们所属的图像。如果您没有为图像设置宽度和高度值，则浏览器必须先下载图像才能发现它们的尺寸，并且对于连接不佳的人来说，这会降低页面加载速度。
在过去的几年里，我一直在使用 CSS，我总是在我的 HTML 中的 img 标记中放置 width 和 height 声明。我的问题是，是否在样式表中设置宽度和高度，不再添加这些 HTML 属性，也一样好吗？没有它们，这无疑让我的斯巴达式 HTML 看起来更加干净。
【问题讨论】：
标签： html css image dimensions
您提到的图片未立即下载的问题也适用于您的 CSS。
不同之处在于，如果没有 CSS 的其余部分，整个布局可能没有意义。换句话说，如果 CSS 的其余部分没有加载，那么图像尺寸也丢失的事实就不会那么明显了。
所以我个人认为将尺寸放在 CSS 中很好。
【讨论】：
这是一个很好的问题，但它有点主观，可能会导致比一般建议的 SO 更多的讨论。
在 90 年代，浏览器速度很慢，互联网也是如此。 56k 需要一段时间来传输中等大小的图像。在此期间，布局将调整大小以适合图像。
快进十年，互联网速度更快，渲染时间也更快。人们习惯于在页面加载的前半秒发生一些变化的布局。 不指定图片大小也不错，只要您了解页面布局在加载过程中可能会发生变化。
CSS 在页面加载之前进行解析，因此在 CSS 中指定高度和宽度与内联指定一样有效。
要记住的一点是，内联样式（包括高度和宽度声明）总是在特异性上胜过 CSS。如果您指定内联图像的高度和宽度，如果您想调整图像的大小，则可能必须返回存在图像的每个页面。
我个人建议使用 CSS，因为它将所有样式保存在同一个位置。
【讨论】：
是的，在 CSS 中设置这些属性也可以。
但是，我不知道它会以任何方式影响页面呈现速度。它确实有一点影响，就是依赖于图像的布局会在页面上跳来跳去，直到图像被加载并分配它最终会分配的所有空间。
这不是我自己遵循的做法。
【讨论】：
这里已经讨论并回答了一个类似的问题：
Image width/height as an attribute or in CSS?
应该内联定义。如果你 正在使用 img 标签，该图像 应该具有语义价值 内容，这就是为什么 alt 验证需要属性。
如果图像要成为 布局或模板，您应该使用 除 img 标签以外的标签并分配 图像作为 CSS 背景 元素。在这种情况下，图像有 没有语义，因此 不需要 alt 属性。我是 相当肯定的是，大多数屏幕 读者甚至不知道 CSS 图像存在。
这也很有帮助：
如果它是您网站模板的一部分， 我会把它放在 CSS 文件中。
如果它只是在一页上，它应该是 内联（或在块中定义 页面特定的 CSS 位于顶部）。
【讨论】：
style 属性。仅仅因为您可以使用属性并不意味着您应该。
我认为唯一的区别是 css 可以（是的，有可能！）不被读取，所以使用了<img> 属性。
但我不确定，我要检查一下。
编辑：http://www.mezzoblue.com/archives/2005/05/10/image_attrib/
【讨论】：
虽然您可以使用 CSS 来清理布局，但如果您的布局因无法加载单个图像而混乱，您应该先修复它。
现代布局应由 div 和 CSS 控制，布局中的图像应仅以 background-image: 的形式提供
【讨论】：
过去总是将尺寸放入 HTML 代码的原因在于加载时间——在 14.4K 调制解调器上，即使是相对较小的图像文件也会在主 HTML 文档加载后显着加载。
这些天来，这已经不是什么大问题了。如果这是一个问题，值得注意的是 CSS 文件将在主 HTML 文档之后加载，因此如果您只在那里指定尺寸，您可能会遇到同样的问题，但 CSS 文件通常很小，所以效果应该是最小化。
另外一点是，老式的 HTML 设计非常注重布局，而图像尺寸通常是其中的关键部分——如果图像尺寸错误，整个页面的布局通常会完全错误。
现代页面设计的处理方式非常不同，将任何布局信息放入 HTML 中，并将其全部抽象到样式表中。因此，在典型的现代站点上，在加载样式表之前，站点将只是一系列块，并且完全缺乏设计。事实上，通常图形本身——不仅仅是它们的尺寸——是在样式表中定义的。
所以答案是，要遵循现代页面设计方法，你应该把它放在样式表中。
显然，对于当今大多数网站来说，快速加载样式表至关重要，但影响的不仅仅是图形的大小。
【讨论】：