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

I displayed the svg logo using the Next.js Image tag.


import Image from "next/Image"

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

Then when I used lighthouse to get a report on the page,
I got a warning saying "Serves images with low resolution".

enter image description here

Also, if you try setting both the width and height to 1024px,
this warning will disappear. How can I get rid of this warning even with 32px?

htmlcssreactjsnext.jslighthouse


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions