Pagespeed 警告 - 在图像元素上使用明确的宽度和高度答案

【问题标题】：Pagespeed warning - Use explicit width and height on image elementsPagespeed 警告 - 在图像元素上使用明确的宽度和高度
【发布时间】：2021-08-16 09:21:52
【问题描述】：

我想使用 tailwind css 在我的网页中设置响应式图像。我已经提供了足够的类以使其适用于不同的屏幕尺寸。现在我在页面速度中收到以下错误。

如何消除警告？

【问题讨论】：

标签： css image tailwind-css pagespeed web-performance

【解决方案1】：

您可以通过在图像中添加width 和height 来消除此警告，如下所示：

<img loading="lazy" src="assets/image/brainstorm/svg" alt="brainstorm" width="400" height="200" class="w-5/6 mx-auto" />

基本上将width 和height 直接添加到html 的img 标签可以防止布局移位，即使img 尚未加载。当img 被延迟加载时，这一点尤其重要。更多信息here

【讨论】：

即使我指定了固定的高度和宽度，CLS 也会发生，并且我希望我的图像具有响应性，因此添加了类。这不会回答我的问题。

【解决方案2】：

仅添加高度和宽度属性和类是行不通的，您还必须将图像裁剪到其确切尺寸。例如，如果您设置了 100px 的高度和宽度，则图像的高度和宽度也应该是 100px。

【讨论】：

【解决方案3】：

背景

存在此警告是为了防止图像加载时布局发生偏移。目前，图像的类别为w-5/6 mx-auto。这足以使图像具有响应性，但是在加载图像之前，浏览器不知道图像的高度。因此，当图片加载时，会有布局偏移。

然后，您需要在加载之前告诉浏览器图像的宽度和高度。有几种方法可以做到这一点。

已知尺寸

如果您知道图像的高度，我建议您遵循 fromaline 的回答。

<img src='assets/image/brainstorm.svg' alt='nature' class='w-5/6 mx-auto border' width='300' height='300' />

因为我们已经用w-5/6 定义了显示宽度，所以图像将是响应式的。然后将width='300' 和height='300' 属性用于纵横比。

这是 Tailwind 游乐场的链接，向您展示它如何响应并消除布局偏移：https://play.tailwindcss.com/rjz9ylFNl5?size=482x720

尺寸未知

如果您不知道图像的宽度和高度并且您需要它们具有响应性，那么您实际上需要创建一个具有固定纵横比的容器。我建议查看aspect ratio plugin。

<div class='w-5/6 aspect-w-16 aspect-h-9 mx-auto'>
  <img src='assets/image/brainstorm.svg' alt='nature' class='object-cover w-full h-full'  />
</div>

再次，指向 Tailwind Playground 演示的链接：https://play.tailwindcss.com/2zmPJixbrO?size=584x720

【讨论】：

【解决方案4】：

尝试使用Tailwind aspect ratio。它工作正常

【讨论】：