如何修复 Next.js 灯塔中的 "Serves images with low resolution" 警告？

Question

我使用 Next.js 图片标签显示了 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，我怎样才能摆脱这个警告？

Answer 1

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

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

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

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

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

如何修复 Next.js 灯塔中的 "Serves images with low resolution" 警告？

How do I fix the "Serves images with low resolution" warning in lighthouse in Next.js?

html

css

lighthouse

reactjs

next.js