Images should have height and width properties according to Lighthouse

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 19.6.0: Tue Jan 12 22:13:05 PST 2021; root:xnu-6153.141.16~1/RELEASE_X86_64
Binaries:
  Node: 18.7.0
  npm: 8.15.0
  Yarn: 1.22.5
  pnpm: 7.8.0
Relevant packages:
  next: 12.2.4-canary.12
  eslint-config-next: 12.2.2
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

Chrome

How are you deploying your application? (if relevant)

CodeSandbox

Describe the Bug

I’m experiencing the same issues as described in the below two tickets. The Lighthouse Performance test suite is giving me the error of Image elements do not have explicit width and height when using next/image.

https://github.com/vercel/next.js/issues/35091

https://github.com/vercel/next.js/issues/35953

Expected Behavior

I expect for Lighthouse’s Performance test suite not to give me this error when using Next’s Image component.

Link to reproduction

https://codesandbox.io/s/next-image-issue-ekqqgh?file=/pages/index.tsx

To Reproduce

Utilize Next’s Image component and run Lighthouse’s Performance suite on Chrome. You can also just see the issue in the supplied Codesandbox (Open In New Tab).

[styfle]

This is fixed in the latest lighthouse https://github.com/GoogleChrome/lighthouse/issues/11631#issuecomment-1217146090

[pjaws]

We are experiencing this issue in LHCI with PNG/JPG images as well. Testing in production mode.

Turning off uses-responsive-images to get the tests to pass doesn’t seem like a great long-term solution.