在HTML和CSS中为页面加载指定图像尺寸

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

这个猜测得到了 Google's pagespeed rules . 他们似乎可以用这种方式指定图像(强调我的):

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

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

在属性中定义宽度和高度(与在CSS中相反)的关键区别在于 数据 ,不是表示参数。想象一下管理下面的样式表

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

这不必要地将CSS与图像纠缠在一起。它还限制了自适应布局,即当推断出图像的某个维度时(例如。 width: 100% ).

另外,考虑CSS规则,比如 object-fit . 困惑什么 width 和 heigth 样式属性则意味着可能出现。