Lighthouse Error - Serves images with low resolution

Error Message:

Image natural dimensions should be proportional to the display size and the pixel ratio to maximize image clarity.

According to this message, the natural size of the image is smaller than the display size, which can cause the image to appear blurry on high-resolution displays (e.g., Retina displays).

Example:

URL	Displayed size	Actual size	Expected size
image.png	200 x 60	200 x 60	300 x 90

In this example, image.png has a size of 200 x 60 pixels, but to appear clear on high-resolution displays, it should be prepared at 2x resolution, i.e., 300 x 90 pixels.

Solution

Prepare High-Resolution Images. Prepare the image at 2x the display size for high-resolution displays.
Use the srcset Attribute.

<img src="/image.png" srcset="/image.png 1x, /image@2x.png 2x" alt="Logo" width="200" height="60" />

Use next/image if you are using Next.js.

<Image
  src="/image.png"
  alt="Logo"
  width={200}
  height={60}
  sizes="(max-width: 768px) 100vw, 200px"
/>