Images are loaded based on bandwidth

[stfn00]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: x64
    Binaries:
      Node: 16.17.0
      npm: 8.15.0
    Relevant packages:
      next: 13.4.1
      eslint-config-next: 13.0.3
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

Image optimization (next/image, next/legacy/image)

Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/youthful-leftpad-edrrez

To Reproduce

Open Developer tools on Network tab and you can see which images are loaded on first load.

Describe the Bug

Test loading the site with the normal connection and the images are loaded one at a time and the lazy loading works fine.

While if we do a test in "Slow 3G" we can see that on the first loading the images are all loaded and therefore the lazy loading is not working.

Expected Behavior

What I expect is that the images are loaded respecting the lazy loading principle. More in case the connection is lower, Instead in this case the opposite happens and when the connection is lower more images are loaded.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[stfn00]

Can someone give me feedback, with a test for uploading images in "Slow 3G", referring to the sandbox? Thank you!

https://codesandbox.io/p/sandbox/youthful-leftpad-edrrez

[stfn00]

Hi everyone! I'd like to get simply an explanation of the next/image component on this issue. If you can, I would simply like to know if this issue, i.e. loading more images in slow connection situations, is wanted or not.

[stfn00]

@JesseKoldewijn Have you ever encountered this kind of problem/behavior with next/image component?

[JesseKoldewijn]

@JesseKoldewijn Have you ever encountered this kind of problem/behavior with <Image /> component?

Can't say that I have to be honest. Although I also haven't seen a reproduction that shows this exact behavior to be honest since the codesandbox you pinned above only loads one image which is above the fold. This would make it desirable to load this image instantly anyway.

[JesseKoldewijn]

I do have one project over at https://jkinsight-next.vercel.app/about where I do lazyload an image even though it's above the fold where I have a custom blurhash as the blur placeholder.

[stfn00]

If you do the sandbox test, setting the Network parameter to "Slow 3G" and selecting the filter type to "Img", you can reproduce the problem.

[JesseKoldewijn]

We might need someone else to have a look at it tho because I would not really know where this issue could be coming from.

[stfn00]

Of course I just wanted to know if the problem is actually reproducible, and therefore it doesn't just happen to me. Thanks anyway! 👍

[JesseKoldewijn]

Hey @shuding sorry for the ping but I think you might know more about these types of issues.

A short recap: When using the Image component with lazy-loading this doesn't seem to listen to the lazy-loading flow when running of a slow connection.