Question

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

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

我现在遇到的情况是我在一个页面上有大量的图像，我更喜欢通过CSS设置尺寸，以便更容易控制和重复性更低的HTML代码：

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

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

欢迎任何见解。

由于

Answer 1

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

Google's pagespeed rules支持该猜测。他们似乎很好地指定图像（强调我的）：

通过消除不必要的回流和重新绘制的需要，为所有图像指定宽度和高度可以加快渲染速度。

当浏览器布置页面时，它需要能够在诸如图像之类的可替换元素周围流动。它甚至可以在下载图像之前开始呈现页面，前提是它知道包装不可替换元素的尺寸。如果在包含文档中未指定维度，或者指定的维度与实际图像的维度不匹配，则浏览器将需要重排并在下载图像后重新绘制。要防止回流，请在HTML <img>标记，或CSS 中指定所有图像的宽度和高度。

Answer 2

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

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

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

另外，请考虑object-fit等CSS规则。可能会出现关于width和heigth样式属性的混淆。

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

2 个答案: