Did you try adding loading="lazy" and priority={false} to the <Image /> component?

For example:

1
<Image
2
    alt={gameInfo.name}
3
    unoptimized
4
    fill
5
    style={{ objectFit: 'cover' }}
6
    draggable={false}
7
    src={urlFor(thumbnailUrl.image).auto('format').quality(74).url()}
8
    loading="lazy"
9
    priority={false}
10
/>

Also, is there a special reason you're using urlFor? In Next.js 14 & 15, you can do:

1
<Image
2
    alt={gameInfo.name}
3
    fill
4
    style={{ objectFit: 'cover' }}
5
    draggable={false}
6
    src={thumbnailUrl.image}
7
    qaulity={74}
8
    loading="lazy"
9
    priority={false}
10
/>

I have tried all those options with no success.

I can see by default in the HTML inspector the images have loading="lazy" as an attribute.

It seems after upgrading to Next 14 the google eager loading of images are much more aggressive for som reason.

The UrlFor is a Sanity CMS lib that quickly generates image urls from Sanity image records.

We decided to use a lib call react-intersection-observer and manually determine if something is in view, instead of relying on the browser + next/image to decide if it is in view. Hopefully, this approach is correct and works as intended.