Images should have height and width properties according to Lighthouse

[kee-oth]

Verify canary release

• [X] 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).

[11koukou]

I think that happens when using layout="fill", however as long as lighthouse does not report high layout shift or unnecessarily large image size, you shouldn't consider this being a serious problem.

[balazsorban44]

Assuming that https://github.com/GoogleChrome/lighthouse/pull/13737 has landed a while ago, I think this should not occur anymore. Could you verify the Lighthouse version that your browser uses?

Using the reproduction, I cannot reproduce this issue. :thinking:

Also, make sure to run the Lighthouse test on a production deployment (ie.: next build && next start) for a realistic result. I could only see the result you are describing in next dev, but that should not be used to measure performance anyway.

[shubham-available]

Hello @balazsorban44, I am facing similar issue. I am using lighthouse 9.6.1 on my browser. I am testing in production but it still showing Image elements do not have explicit width and height

I am using Image from 'next/image'. <Image src="/images/stamp.svg" alt="stamp" width={220} height={220} />

Have you solved the issue or is there anything you can help me out with?

[ZakariaBenali]

Hello @balazsorban44, This issue still exists even after lighthouse 9.6.2, it is only related to images with layout intrinsic since this is the only layout that generates an image placeholder (which causes this issue).

Here is another reproduction of the issue with all layouts for more clarity https://codesandbox.io/s/next-image-12-2-lighthouse-issue-eeqmiw

You can also check it directly via this link https://next-img-zakariabenali.vercel.app/

Tested on PageSpeed Insights which uses lighthouse 9.6.4 (at the moment of writing this comment) and the issue still exists. Tested on lighthouse 9.6.5 (locally) and the issue still exists

I've opened a PR for a potential solution https://github.com/vercel/next.js/pull/39456

Thank you for your time reviewing this.

[styfle]

Looks like they are holding off until lighthouse 10 for some reason

https://github.com/GoogleChrome/lighthouse/issues/11631#issuecomment-1132024279

[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.

[styfle]

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

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.