图片中的图像元素没有明确的宽度和高度

Question

PageSpeed Insights 警告我：

在图像元素上设置明确的宽度和高度，以减少布局偏移并提高 CLS。

但是，如果我使用这样的图片标签，我该如何修复它：

<picture>
    <source srcset="https://via.placeholder.com/150.webp" media="(max-width: 768px)" type="image/webp">
    <source srcset="https://via.placeholder.com/150.png x1, https://via.placeholder.com/300.png x2" media="(max-width: 768px)" type="image/png">
    <source srcset="https://via.placeholder.com/500.webp" type="image/webp">
    <source srcset="https://via.placeholder.com/500.png" type="image/png">
    <img src="https://via.placeholder.com/500.png">
</picture>

我不需要在移动版本中使用宽度和高度为500px 的图像标签。我想要响应式图像。

当然，我可以在图像标签中设置属性 宽度和高度，值为 500，然后在 css 中使用!import和@media，但我认为这只是无效的规则。

我怎样才能避免这个警告或修复它（如果可能的话）？

Answer 1

此 Pagespeed Insights 消息具有误导性，您不需要使用 HTML 属性设置图像的宽度 + 高度，您也可以使用 CSS。

要遵守 a 中的规则，<picture>您可以：

• 在CSS中设置width+ height：.your-image { width: 200px; height: 150px; }

• 在CSS中设置width+ aspect-ratio：.your-image { width: 100%; aspect-ratio: 16 / 10; }

• 在CSS中设置height+ aspect-ratio：.your-image { height: 300px; aspect-ratio: 16 / 10; }

此 CSS 需要内联或位于非异步/延迟文件中。

可以width在 CSS 中声明为百分比。

来源： https: //github.com/GoogleChrome/lighthouse/issues/13098