设置 Img 标签的高度和宽度属性

引言

Web 性能倡导者经常建议为您的图像添加尺寸以获得最佳性能，以便在图像本身被下载之前为图像布置适当的空间。这样可以避免在下载图像时发生布局变化——Chrome 最近开始在新的Cumulative Layout Shift 指标中衡量了这一点。

好吧，一个肮脏的、小秘密——在核心网络性能倡导者之外并不为人所知——是直到最近，这实际上在很多情况下并没有产生什么影响，正如我们将在下面看到的那样。然而，在 CSS 世界最近发生了一些变化以及最流行的 Web 浏览器快速采用这些变化之后，向标记添加width和height属性再次变得有用。

设置height和width属性的重要性

以这个简单的页面为例：

<h1>Your title</h1>
<p>Introductory paragraph.</p>
<img src="hero_image.jpg" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit…</p>
复制代码

这可能会分两个阶段呈现，首先是在下载 HTML 时，然后是在下载图像后。使用上面的代码，这会导致图像下载后主要内容跳下，可以计算出显示它所需的空间：

布局的变化对用户来说非常混乱，特别是如果你已经开始阅读文章，突然你被移动的颠簸甩了，你必须重新找到你的位置。这也给浏览器带来了额外的工作，以在每个图像通过 Internet 到达时重新计算页面布局。在包含大量图像的复杂页面上，这可能会给设备带来相当大的负载，而此时它可能需要处理很多更好的事情！

避免这种情况的传统方法是在标记中提供width和height属性，<img>因此即使浏览器只有 HTML，它仍然能够分配适当的空间量。因此，如果我们将上面的示例更改为以下内容：

<h1>Your title</h1>
<p>Introductory paragraph.</p>
<img src="hero_image.jpg" alt=""
   width="400" height="400">
<p>Lorem ipsum dolor sit amet, consectetur…</p>
复制代码

然后渲染发生如下，当图像到达时为图像留出适当的空间，并且在下载图像时文本没有不和谐的变化(如果提供了图像尺寸，则文本不应移动，以便分配适当的空间)：

即使忽略内容跳跃对用户的恼人影响（您不应该这样做！），对 CPU 的影响也可能相当大。下面的屏幕截图显示了 Chrome 在我工作的网站上执行的性能计算，该网站有大约 100 张图片的画廊。左侧显示了提供 和 时的计算，右侧显示了width不提供时的计算height。

正如你所看到的，影响是相当大的——尤其是在低端设备和网络速度较慢的情况下，图像是分开输入的。这会显着增加加载时间。

CSS 如何与元素的宽度和高度交互

当您尝试使用 CSS 更改图像的宽度和高度时，可能会出现问题。例如，如果您想将图像限制为特定宽度，您可以使用以下 CSS：

img {
  max-width: 100%;
}
复制代码

这将覆盖width属性，并在必要时对其进行约束，但如果您已height在图像标签上明确设置了不再保持图像的纵横比（HTML 和 CSS 之间的图像尺寸冲突可以创建拉伸图像）：

这实际上很容易通过height: auto在 CSS 中添加一行来解决，因此 HTML 中的 height 属性也被覆盖：

img {
  max-width: 100%;
  height: auto;
}
复制代码

但是，我发现它仍然让人们感到意外，有时会导致他们没有在 HTML 中指定图像尺寸。由于没有图像尺寸，您可以max-width: 200px在 CSS 中指定而无需指定height: auto，浏览器将自动计算出高度本身——一旦它有了图像。

所以，一旦我们添加了维度和技巧，height: auto我们就会两全其美，对吧？没有布局变化，还有使用 CSS 调整图像大小的能力？好吧，直到最近，您可能会惊讶地发现答案实际上是：不（我是——因此我决定写这篇文章）。

例如，使用下面的代码：

<style>
img {
  max-width: 100%;
  height: auto;
}
</style>
<h1>Your title</h1>
<p>Introductory paragraph.</p>
<img src="hero_image.jpg" alt=""
  height="500" width="500">
<p>Lorem ipsum dolor sit amet, consectetur…</p>
复制代码

这将导致此负载（height: auto在 CSS 中使用时会发生布局变化）：

等等，这是怎么回事？我们回到第一个问题。我以为我说过通过在 HTML 中指定图像尺寸可以避免这种布局偏移问题？好吧，这就是它变得有趣的地方，并将引向本文的重点。

问题是，除非您为图像提供明确width 的 heightCSS 值——并且谁想在响应式世界中像这样限制自己，你希望图像扩展或缩小以填充可用空间——那么 CSS 将需要从图像文件本身的尺寸中找出auto尺寸的一部分。它忽略了 HTML 中设置的任何width属性height。

所有这一切的含义是，在很多情况下，图像上的指定width和属性实际上并没有那么有用。height是的，当图像以全尺寸显示时，没有任何 CSS 更改任何尺寸，解决布局偏移问题很有用。但是，当您使用下面的 CSS 来确保图像不会溢出其可用空间时，一旦可用宽度变得小于实际图像大小，您就会遇到问题。

img {
  max-width: 100%;
  height: auto;
}
复制代码

这会影响我们以响应方式限制图像大小的任何页面——即小屏幕移动设备。这些很可能正是遭受网络限制和有限处理能力的用户，他们将受到布局变化的最大影响！当然，理想情况下，我们应该为屏幕尺寸提供适当尺寸的图像，但您无法覆盖所有设备尺寸，因此通常需要通过浏览器调整图像大小，尤其是在移动设备上。

CSScontain属性

CSScontain属性为您提供了一种向浏览器解释布局的方法，因此可以进行性能优化。但是，它确实会在您的布局方面产生一些副作用。

具体可以看这：Helping Browsers Optimize With The CSS Contain Property

相关链接

《图像优化指南》-如何在网络上优化和提供高质量图像

Helping Browsers Optimize With The CSS Contain Property

Setting Height And Width On Images Is Important Again