CSS/HTML:在图像上使用max-height是否有助于HTML渲染？

Question

我刚读完YSlow建议总是定义图像尺寸(高度/宽度)以提高HTML渲染性能.

但是,我不知道我连接的图像尺寸.

我所知道的是,height永远不会超过200px,width永远不会超过300px

如果我定义(CSS),我会是一个好处:

img {max-height: 200px; max-width: 300px}

对于HTML性能渲染？

Answer 1

不,设置max-width和max-height不会改善性能.

指定图像宽度和高度的原因是浏览器将准确知道图像占用的空间大小.如果未指定图像大小,则浏览器必须在加载图像时重排布局.

您可以在某些页面上看到这种令人讨厌的效果,其中页面首先加载时没有图像的占位符,然后内容会在图像加载时跳转到位置.

如果您无法指定某些图像的大小,请不要过于担心.只需确保图像加载时布局表现良好,并且不要跳得太多.