Getting "missing explicit width and height" on pages despite defining aspect-ratio in CSS

[goonydev]

Provide the steps to reproduce

1. Run LH on

What is the current behavior?

I am getting the "Image elements do not have explicit width and height" issue.

What is the expected behavior?

No error, since I define directly in each IMG tag style="width=100%;aspect-ratio=XXX/YYY".

Environment Information

• Affected Channels:
• Lighthouse version: Don't know where to look
• Chrome version: 88.0.4324.190 (Official Build) (64-bit)
• Node.js version:
• Operating System: Windows 10 64-bit

Related issues

We all have adaptive layouts nowadays. Why would we still be using the "width" and "height" attributes? Using a CSS width with aspect-ratio, I manage to define a proper placeholder for my images, with no layout shift, and for all devices. I expect it to be recognized by lighthouse.

[adamraine]

We all have adaptive layouts nowadays. Why would we still be using the "width" and "height" attributes?

Setting an explicit width and height in CSS should pass the audit. In this case, the usage of aspect-ratio instead of height is causing the audit to fail.

I do think images with explicit aspect-ratio and one of height or width should pass the audit as well.

Lighthouse version: Don't know where to look

Should be at the bottom of the report.