5

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

Atef Wagih
  • 377
  • 1
  • 4
  • 22
  • 1
    are you using a `` 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. – GrahamTheDev Jul 03 '21 at 09:45
  • Thanks a lot @Graham Ritchie. I added a `` element and it worked. – Atef Wagih Jul 04 '21 at 09:46
  • @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: `Menu` Anything wrong with it? – Antonio Ooi Sep 14 '21 at 08:20

2 Answers2

4

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" />
Cole Ellison
  • 311
  • 3
  • 7
1

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

Eric Aya
  • 69,473
  • 35
  • 181
  • 253
user18391456
  • 11
  • 1