CODEWITHSUNDEEP
lighthousecore-web-vitalsweb-vitals
Atef Wagih
Atef Wagih

Reputation: 397

How to fix Lighthouse “Serves images with low resolution”

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.

enter image description here

Upvotes: 7

Views: 6869

Answers (2)

Cole Ellison
Cole Ellison

Reputation: 331

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" />

Upvotes: 5

user18391456
user18391456

Reputation: 11

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

Upvotes: 1

Related Questions