在 HTML 和 CSS 中指定图像尺寸以进行页面加载答案

【问题标题】：Specifying image dimensions in HTML vs CSS for page loading在 HTML 和 CSS 中指定图像尺寸以进行页面加载
【发布时间】：2011-05-16 07:50:44
【问题描述】：

我很久以前从某个地方了解到，为 HTML 文档中的 <img> 元素指定宽度和高度可以加快并改善页面加载体验，并且通常会保持这种做法：

<img src="" width="100" height="100" />

我现在面临的情况是，我在单个页面上有大量图像，我更喜欢通过 CSS 设置尺寸，以便于控制和减少重复的 HTML 代码：

.whatever img {width: 100px; height: 100px;}

虽然这不是一个非常严重的问题，但我想知道在 CSS 中声明尺寸是否与在 HTML 中声明尺寸具有相同的好处，还是应该直接在 HTML 中完成？

欢迎任何见解。

谢谢

【问题讨论】：

被标记为 this 的骗子（不过我更喜欢这个问题的措辞）

标签： html css image dimensions pageload

【解决方案1】：

在属性中定义宽度和高度（与在 CSS 中相反）之间的关键区别在于它会变成数据，而不是表示参数。想象一下管理以下样式表

img[src='/images/tree.jpeg'] {
    width: 100px;
    height: 100px;
}

这不必要地将 CSS 与图像纠缠在一起。它还限制了自适应布局，即当推断其中一个尺寸时，您不能再让尚未加载的图像占用正确的空间（例如width: 100%）。

另外，请考虑 CSS 规则，例如 object-fit。可能会混淆 width 和 heigth 样式属性的含义。

【讨论】：

【解决方案2】：

我猜如果样式表立即可用，图像尺寸将立即应用于布局，这是练习的重点。

Google's pagespeed rules 支持这种猜测。他们似乎可以通过这种方式指定图像（强调我的）：

为所有图像指定宽度和高度，无需不必要的重排和重绘，从而加快渲染速度。

当浏览器布置页面时，它需要能够围绕可替换元素（例如图像）流动。它甚至可以在下载图像之前开始渲染页面，前提是它知道包裹不可替换元素的尺寸。如果包含文档中未指定尺寸，或者指定的尺寸与实际图像的尺寸不匹配，则浏览器将在下载图像后要求重排和重绘。为防止重排，请在 HTML <img> 标签、或 CSS 中指定所有图像的宽度和高度。

【讨论】：