[Feature Request] Image component downloads images twice when using NextImage

[RnbWd]

Using next/image with NextUI's Image component does not utilize Next's image optimization

Currently, if you embed Next's Image component (next/image) inside of NextUI's Image component, it downloads the original src image file, and also displays a loading screen until the original image is loaded in the browser. Here's example code:

 <Image
          alt={tool.fields.Name}
          as={NextImage}
          height={300}
          quality={75}
          src={`/banners/banner.png`}
          width={500}
        />

The issue is that the original src file,banner.png, is never displayed in the browser, but it's still being downloaded, and the skeleton is shown until the original image is downloaded. In my example app, I have about 20 images, and each png image is about 150kb. The loading process can be very slow, sometimes taking more than a minute for the image skeletons to disappear. However, the image that is actually shown in browser is the optimized webp or avif file, which is less than 5kb. So the Image skeleton is still shown even though the final image has already been downloaded.

Describe the solution you'd like

It would be nice if NextUI's image component could only download the optimized image, instead of the original src. I'm not quite sure how next/image handles the src file, but the source image is different once the component is mounted, and NextUI begins downloading the original src before NextImage updates the src prop.

Describe alternatives you've considered

Using next/image alone solves the issue, only downloading the optimized files. It should also be possible to copy the optimized image url directly, but I haven't tried that method yet. The optimized image url looks something like: _next/image?url=%2Fbanners%2FBanner.png&w=1080&q=75

Screenshots or Videos

No response

[joshi-mehul]

@RnbWd Can you create a fiddle out of this and provide a link here?
I can take this up.

[RnbWd]

I can try to create a fiddle with it, I'll probably try linking it directly to the images from the site I'm building so the next optimized images are displayed alongside the pngs

[joshi-mehul]

@jrgarciadev Is it ok if I take this up?

[marvinerkes]

Also facing the same issue, would be good to get a solution here.

[Hahlh]

@wingkwong
The conversion from issue #1239 to a feature request in discussions likely has been done by accident?