在 HTML 与 CSS 中指定页面加载的图像尺寸

Question

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

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

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

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

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

任何见解都会受到欢迎。

谢谢

Answer 1

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

Google 的 pagespeed 规则支持这一猜测。他们似乎很擅长以这种方式指定图像（强调我的）：

指定所有图像的宽度和高度可以消除不必要的回流和重绘，从而加快渲染速度。

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

Answer 2

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

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

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

另外，请考虑 CSS 规则，例如 object-fit< /代码>。可能会出现关于 width 和 heigth 样式属性含义的混淆。