小编Vad*_*ich的帖子

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

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>

Run Code Online (Sandbox Code Playgroud)

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

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

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

html image media-queries google-pagespeed

Vad*_*ich

lucky-day

8
推荐指数

1
解决办法

2661
查看次数