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

【问题标题】：How do I fix the "Serves images with low resolution" warning in lighthouse in Next.js?如何修复 Next.js 灯塔中的“提供低分辨率图像”警告？
【发布时间】：2022-02-11 20:55:48
【问题描述】：

我使用 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 在页面上获取报告时，
我收到一条警告，说“提供低分辨率的图像”。

此外，如果您尝试将宽度和高度都设置为 1024 像素，
此警告将消失。即使是 32px，我如何才能摆脱这个警告？

【问题讨论】：

标签： html css reactjs next.js lighthouse

【解决方案1】：

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

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

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

也许如果您真的想修复它，您可以使用更大的viewbox 重新生成 SVG，并相应地缩放 SVG。这对 SVG 本身没有影响，但如果它困扰您，可以消除错误。

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

【讨论】：