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

【问题标题】：Image elements do not have explicit width and height in Picture图片元素在图片中没有明确的宽度和高度
【发布时间】：2021-09-27 17:21:05
【问题描述】：

PageSpeed Insights 警告我：

在图像元素上设置显式宽度和高度以减少布局转变和改进 CLS。

但是如果我像这样使用 Picture 标签，我该如何解决：

<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>

我不需要 width 和 height 500px 的移动版图像标签。我想要响应式图片。

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

如果可能，我如何避免此警告或修复它？

【问题讨论】：

我有完全相同的问题，但我还没有找到合理的答案。我们需要能够为源元素添加“宽度”和“高度”属性
你找到解决方案了吗？

标签： html image media-queries google-pagespeed

【解决方案1】：

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

要遵守<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

【讨论】：