next/image decreases (lighthouse) performance

[borisyordanov]

Link to the code that reproduces this issue

See below

To Reproduce

I created a couple of code sandboxes with the nextjs starter example. The first is unmodified, the second one replaces the next/image package with an img HTML element.

1. Generate a lighthouse report for the version with next/image
2. Generate a lighthouse report for the version with img

I'm attaching the HTML reports that I got
reports.zip

Current vs. Expected behavior

Using the native image tag is apparently more performant. However the docs and the eslint rule @next/next/no-img-element discourage this option.

Verify canary release

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

Provide environment information

https://codesandbox.io/docs/learn/environment/vm

Which area(s) are affected? (Select all that apply)

Image optimization (next/image, next/legacy/image)

Additional context

I first found these results in my production app, deployed on AWS Amplify. I reproduced the same result if I build the app and serve it locally. The issue is reproducible in the code sandbox as well, running the latest version of Next. It's unclear if this is an issue with Lighthouse or Next.
I tested with .svg and .png images. The priority prop doesn't seem to make a measurable difference.

[gabo2192]

I'm experiencing the same issue.

[thisislvca]

Same issue here. Using the default img tag improves page speed noticeably...

[naseef0]

I also experiencing the same issue. I'm getting low LCP even with next images

[zS1m]

Same issue here

It is said in Next.js docs

You should use the priority property on any image detected as the Largest Contentful Paint (LCP) element. It may be appropriate to have multiple priority images, as different images may be the LCP element for different viewport sizes.

But the fact is, when I set priority to true, the LCP score decreases.

[Heet-Bhalodiya]

I'm also experiencing the same issue.