【发布时间】：2022-03-07 02:22:26
【问题描述】：
当我使用 https://web.dev/measure 审核我的网站时，我得到的建议之一是“提供低分辨率图像”。
从下面的屏幕截图中可以看出，我显示的图像尺寸与实际尺寸相符。我不知道这里出了什么问题以及预期的大小是多少。
如果我把图片放大了，我会收到相反的错误，说我的图片尺寸不合适，应该缩小尺寸。
所有这些图片都有明确的 48 像素高度和width: auto; 以使其具有响应性。
有解决此问题的建议吗？
提前致谢。
【问题讨论】：
-
您是否使用
<picture>元素或srcset属性来提供不同分辨率的图像？如果不是，那很可能是问题所在，因为一个测试将检查它是否可以获得原始分辨率（1x 和正确大小）的图像，另一个将检查它是否可以获得支持它的设备的更高像素密度图像（2x 分辨率） . -
非常感谢@Graham Ritchie。我添加了一个
<picture>元素并且它起作用了。 -
@GrahamRitchie 我已经添加了
scrset属性，但仍然是同样的问题。我有一个适合所有屏幕尺寸的32px小图标，这意味着无论是小屏幕还是大屏幕，我仍然使用相同的尺寸：<img width="32" height="32" src="/images/icons/menu.png" srcset="/images/icons/menu.png 32w" sizes="32px" alt="Menu">有什么问题吗？
标签： lighthouse core-web-vitals web-vitals