Hello fellow devs,

Thanks for your help here. My main goal is SITE speed. I'm trying to fix some issues using the nextjs image component

Two main questions here about this image component
1. NextJS docs on <Image component with static imports and if static import local image called out here in the docs will still work the same (automatically determine the width/height) from images statically imported versus src="/imageFromPublicFolder https://nextjs.org/docs/pages/building-your-application/optimizing/images#local-images

Example:
// Static Import
import myImage from '../public/path/to/image.jpg';

<Image src={myImage} alt="Description" />

versus

// Direct SRC Reference
<Image src="/path/to/image.jpg" alt="Description" />

Does one method have performance advatanges over the other in a Next.js context?

2. I've been wrestling with improving our site's Largest Contentful Paint (LCP) metric, but despite following Next.js and general web performance guidelines, we're still not hitting the mark. We've optimized our images, applied loading="eager" and priority to critical images, and used the sizes attribute to serve appropriate image sizes. Yet, the LCP scores from Google's PageSpeed Insights suggest there's more to be done.

<Image
src={bakeryBg}
alt="Bakery With Logo"
priority
quality={65}
loading="eager"
sizes="(max-width: 479px) 45vw,
(max-width: 767px) 50vw,
(max-width: 991px) 55vw,
(max-width: 1279px) 60vw,
1000px"
placeholder="blur"
/>

I have
- optimized the image and compressed it
- statically imported it at the top
- used lower quality
- used priority / eager

Still seeing Largest Contentful Paint element 3,240 ms

Despite these efforts, and ensuring our images are compressed and using modern formats, our LCP isn't where we want it to be. Have any of you faced similar challenges and found effective solutions? Specifically, are there Next.js features or optimization strategies we might be overlooking?