"Properly size images" incorrectly shown as "Passed"

[demianrenzulli]

Provide the steps to reproduce

1. Run LH on https://use-media-queries-unoptimized.glitch.me/

The site requests the same background image of 1006KB regardless of the screen size.

What is the current behavior?

The properly size images opportunity is shown as passed:

What is the expected behavior?

On previous versions of Lighthouse (I don't have the version number), this opportunity was marked as not passed:

That should be the expected behavior, given the size of the image and the way is being displayed (same image for all devices).

Environment Information

• Affected Channels:
• Lighthouse version: Tested it in 5.6.0 (the one that's running in Web.dev) and in 5.7.0 in Chrome.
• Chrome version: 80.0.3987.122
• Operating System: Mac OS

Related issues
A similar issue has been already reported, but in that case the tool was working properly.

[patrickhulce]

Thanks for filing @demianrenzulli! We started intentionally ignoring CSS background images because of the false positive rate for spritesheet assets and the significant complexity in properly handling responsive image declarations in CSS compared to <picture>.

Sorry that this is one of the cases where it still would've been useful to have around.

[demianrenzulli]

Thank you @patrickhulce! It makes sense.

The reason I'm using that demo, is because we are about to release a Optimize CSS Background Images with Media Queries guide on Web.dev, and we were using the results of the Lighthouse tests to show the before / after of the optimization.

Since this is a known limitation, and it's not going to change, it seems like the best we can do is to eliminate the use of Lighthouse for this guide, and rely exclusively on DevTools.

cc // @kaycebasques

[patrickhulce]

Aw bummer. Yeah unfortunately manual inspection with DevTools is probably the best way to navigate this now.

[demianrenzulli]

Thanks for the context @patrickhulce! Closing this one now 👍