Google Lighthouse complains about 'Properly size images' for an image marked 'passed' by RespImageLint

[danielbachhuber]

Following up on https://github.com/ausi/respimagelint/issues/62#issuecomment-1017758220, I wanted to document an example of an image that Google Lighthouse is still complaining about, even though it's marked 'passed' by the bookmarklet. I don't know that we'll ever want to solve it given https://github.com/GoogleChrome/lighthouse/issues/11593#issuecomment-716598218, but capturing for reference.

Here is the image's markup:

<img width="840" height="1200" src="https://staging.pinchofyum.com/wp-content/uploads/Instant-Pot-Beef-Stew-1-3-840x1200.jpg" class="object-cover self-center w-44 h-44 md:w-full md:h-auto" alt="A pot of stew on a blue tablecloth." loading="eager" data-pin-nopin="true" sizes="(min-width: 1220px) 276px, (min-width: 820px) calc(23.95vw - 11px), (min-width: 440px) 171px, 41.67vw" srcset="https://staging.pinchofyum.com/wp-content/uploads/Instant-Pot-Beef-Stew-1-3-840x1200.jpg 840w, https://staging.pinchofyum.com/wp-content/uploads/Instant-Pot-Beef-Stew-1-3-420x600.jpg 420w">

On the Moto G4, here's how the image appears:

[ausi]

Directly targeting Google Lighthouse is not something I would be extremely happy with I think.

But looking at some statistics it seems that 360px is a very common with for smartphones. More than 50% of mobile traffic seems to have a resolution of 360 to 375 pixels wide.

With this in mind one could argue that the threshold for screen sizes from 360 to 375 should be set very low because of the huge number of users that will have exactly this screen resolution.

So checking for 360 and 375 (with @​2x) using a lower threshold could be a good solution that works for everybody and is also closer to what Lighthouse does.

What do you think?

[danielbachhuber]

I think your assessment would be a very sensible approach.