在哪里指定图像尺寸以实现最快的渲染:在HTML或CSS中？

Question

我了解到明确指定图像尺寸是最佳做法.然后,浏览器可以在仍然自己下载图像的同时布局页面,从而改善(经过执行的)页面渲染时间.

这是真的？如果是这样,在HTML或CSS中指定维度是否有区别？

• HTML: <img src="" width="200" height="100">
• 内联CSS: <img src="" style="width: 200px; height: 100px">
• 外部CSS: #myImage { width: 200px; height: 200px; }

Answer 1

根据Google Page Speed,如果您通过CSS或HTML指定维度并不重要,只要您的CSS定位IMG标记本身而不是父元素:

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

但请注意,他们建议不要使用这些尺寸调整图像大小,即始终使用实际尺寸:

不要使用宽度和高度规格来动态缩放图像.如果图像文件实际为60 x 60像素,请勿在HTML或CSS中将尺寸设置为30 x 30.如果图像需要更小,请在图像编辑器中对其进行缩放并将其尺寸设置为匹配(有关详细信息,请参阅优化图像.)