Nextjs/image lazy loading with Chrome

Help
1

Hi, I am using nextjs 14.2.24 and recently upgraded from nextjs v12.

example of my nextjs image code:

 <Image
        alt={gameInfo.name}
        unoptimized
        fill
        style={{ objectFit: 'cover' }}
        draggable={false}
        src={urlFor(thumbnailUrl.image)
            .auto('format')
            .quality(74)
            url()}
    />

My requests are 36 with 600kb transferred on FireFox for images compared to
Chrome has 68 requests with 2.9 MB transferred.

It seems like all content vertically that is out of view is getting preloaded on Chrome, compared to Firefox.
Is this expected behaviour and how do I stop/improve this for Chrome?

Note this was not the case in v12 I just recently upgraded to 14.

2

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

For example:

<Image
    alt={gameInfo.name}
    unoptimized
    fill
    style={{ objectFit: 'cover' }}
    draggable={false}
    src={urlFor(thumbnailUrl.image).auto('format').quality(74).url()}
    loading="lazy"
    priority={false}
/>

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

<Image
    alt={gameInfo.name}
    fill
    style={{ objectFit: 'cover' }}
    draggable={false}
    src={thumbnailUrl.image}
    qaulity={74}
    loading="lazy"
    priority={false}
/>
3

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.

1 Like
4

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.

1 Like