Question

我刚读完YSlow recommendation来定义图像尺寸（高度/宽度）以提高HTML渲染效果。

但是，我不知道我正在链接的图像尺寸。

我所知道的是height永远不会超过200像素而width永远不会超过300像素

如果我定义了（CSS），我会是一个好处：

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

对于HTML性能渲染？

Answer 1

不，设置max-width和max-height不会改善性能。

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

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

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

Answer 2

不同比例的图像看起来不太好，因为它们会缩放。我不推荐这个。

Answer 3

在css中设置图像的最大高度和宽度将使img标签根据约束调整img的大小，但如果你使用像asp.net或php这样的后端脚本语言，你可以使用他们的img库来扩展服务器端的图像要么保存到硬盘驱动器以便稍后使用，要么动态调整大小。

Answer 4

在这种情况下，我绝对不会设置图像的高度和宽度，因为你不知道它会是什么。如果你知道大小是多少，那么设置是好的，因为它会减少浏览器在渲染页面时必须重新绘制和重排的数量。

它越少，那么客户端的性能就越好，因为你没有让浏览器太麻烦。

Stoyan Stefanov在最近的博客post

中解释得非常好

Answer 5

我认为您宁愿将<img>包装到<span>或<div>元素中，并设置max-height和max-width。此外，它（span或div）应该有溢出：隐藏设置，因此图像不会超出div的范围。

建议不要将这些设置直接设置为图像，因为在不同的浏览器中渲染会变得不同且速度较慢。