Next JS app - high Largest Contentful Paint showing huge hero image (mobile) in screenshot for initial page load

Question

I'm completely stuck on getting my Hero Image to load efficiently and am using 'PageSpeed Insights' to measure... and really hope someone can help . I'm sure I'm not the only one that's had this issue before but I can't seem to find anything anywhere!

So here's my code for my hero component:

<div className="h-screen bg-[#ecf0f3] relative overflow-hidden">
      <Image
        src={blur}
        alt="blur"
        fill
        style={{ objectFit: "cover", position: "absolute" }}
        quality={100}
        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 20vw"
        className="animate-pulse"
        loading="eager"
      />
      {/* // placeholder="blur"
        // blurDataURL="/blur-placeholder.png" */}
      {/* Main Text */}
      <div className="flex flex-col text-center mx-auto max-w-[1260px] items-center justify-center pt-28 md:pt-28">
<p>some title text here (cut short for this question)</p>

</div>
</div>

Heres the 'PageSpeed Insights' feedback:

blur

<img alt="blur" fetchpriority="high" loading="eager" decoding="async" data-nimg="fill" class="animate-pulse" sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 20vw" srcset="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fblur.b947cdcf.png&amp;w=128&amp;q=100…" src="https://www.bloxywebservices.co.uk/_next/image?url=%2F_next%2Fstatic%2Fmed…" style="position: absolute; height: 100%; width: 100%; inset: 0px;">

and the screenshot is showing this:

The image is really long so assume its preloading the wrong image size??

I feel like I'm going crazy and have been trying to sort this for hours so any help will be massively appreciated!!

Here's my site i'm working on: https://www.bloxywebservices.co.uk/ repo here: https://github.com/sbloxy123/my-freelance-site link for Pagespeen Insights: https://pagespeed.web.dev/analysis/https-www-bloxywebservices-co-uk/lqjji5a1xw?form_factor=mobile

Thanks in advance, let me know if I've missed anything, I don't post often!

---

I've tried a number of things but nothing has come close to changing the length of the image as shown on mobile.

• tried lazy loading
• tried moving css into style={..} rather than className.
• tried changing various css properties - positions, sizes, object-fit.
• reduced image size