9

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

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

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

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

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

欢迎任何见解。

谢谢

4

2 回答 2

12

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

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

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

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

于 2010-11-26T18:49:55.237 回答
1

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

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

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

此外，请考虑 CSS 规则，例如object-fit. 可能会出现对什么width和heigth样式属性的含义的混淆。

于 2017-04-08T17:19:17.503 回答