如何修复 Next.js 中灯塔中的“提供低分辨率图像”警告？

Question

我使用 Next.js Image 标签显示了 svg 徽标。

import Image from "next/Image"

export default function Home() {
  return (
    <div>
      <Image width={32} height={32} src="/logo.svg"></Image>
    </div>
  )
}

然后，当我使用 lighthouse 在页面上获取报告时，
我收到一条警告：“提供低分辨率的图像”。

另外，如果您尝试将宽度和高度都设置为 1024px，
此警告将会消失。即使使用 32px，我怎样才能摆脱这个警告？

Answer 1

这看起来是一个错误，可以安全地忽略（并且最好在 Lighthouse 存储库中报告）。

除了在屏幕上将图像尺寸更改为更大（这显然不是您可能想要做的事情，因为它会影响设计）之外，您无法采取任何措施来纠正此问题。

错误在于它将 SVG 视为光栅图像，并将其视为具有分辨率。

也许如果你真的想修复它，你可以使用更大的视图框重新生成 SVG ，并相应地缩放 SVG。这不会对 SVG 本身产生任何影响，但如果错误困扰您，则可以消除该错误。

另外需要注意的是，这不会影响您的分数，这是一个“诊断”建议，旨在帮助您识别潜在的问题，而不是在评分中加权的项目。