How to fix Lighthouse “Serves images with low resolution”

Question

One of the recommendations I get when I audit my website using https://web.dev/measure, is "Serves images in low resolution".

As you can see from the screenshot below, my displayed image size matches the actual size. I don't know what's wrong here and what's the expected size.

If I made the images larger, I get an opposite error saying that my images are not properly sized and should reduce the size.

All these images have an explicit height of 48px and width: auto; to make it responsive.

Any suggestions to fix this issue?

Thanks in advance.

Insulator

are you using a <picture> element or srcset attribute to offer different resolutions of the image? If not that is likely where the problem lies as one test will check it can get an image at native resolution (1x and correctly sized) and another will check that it can get a higher pixel density image (2x resolution) for devices that support it. – Babylon

Thanks a lot @Graham Ritchie. I added a <picture> element and it worked. – Insulator

@GrahamRitchie I've added the scrset attribute but still the same problem. I have a 32px small icon that fits to all screen sizes, which mean whether small or large screen, I still use the same size: <img width="32" height="32" src="/images/icons/menu.png" srcset="/images/icons/menu.png 32w" sizes="32px" alt="Menu"> Anything wrong with it? – Diadromous

Answer 1

This error is stating that web.dev would have expected you to serve a 96x96 pixel image instead of the 48x48 pixel image. Given that this expected size is 2x the served size, my guess is that web.dev is expecting a scaled up version of the image for a device with a Device Pixel Ratio (DPR) of 2. web.dev performs a series of checks for responsive images (checking for both DPR 1 and DPR 2 devices), so serving only one size will always lead to this error of either images too large or images too small.

Using srcset in your image tag can resolve this. If you follow the example in the Mozilla docs for providing options for 1x and 2x DPR screens, you should see this error get resolved.

<img src="<48px image source>"
  srcset="<48px image source> 1x, <96px image source> 2x" />

Piperine

Answer 2

The whole thing only happens if the image is at the beginning of the page (visible area without scrolling) - if the image is included later (so that you have to scroll) the "error message" does not appear

Haskel