`next/image` with `priority` in App Router causes double fetch on mobile

[gauravsaini964]

Verify canary release

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

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.5.0: Thu Jun  8 22:22:19 PDT 2023; root:xnu-8796.121.3~7/RELEASE_ARM64_T8103
    Binaries:
      Node: 16.20.0
      npm: 8.19.4
      Yarn: 1.22.19
      pnpm: 8.6.0
    Relevant Packages:
      next: 13.4.13-canary.14
      eslint-config-next: 13.4.11
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A

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 or a replay of the bug

Link to the code that reproduces this issue or a replay of the bug
https://github.com/gauravsaini964/image-preload-next13

To Reproduce

• Build the repo.
• Navigate to index page (which is using app-dir) and inspect network tab.
• Preload image is loaded twice of different resolution.
• Navigate to /page-dir (which is using page dir).
• Correct image is preloaded only once.

Generated preload tag

<link rel="preload" as="image" fetchpriority="high" imagesrcset="https://staging.nathabit.in/_nat/images/face_malai_mobile_4c3ebeef79.jpg?format=auto&amp;width=640&amp;quality=75 640w, https://staging.nathabit.in/_nat/images/face_malai_mobile_4c3ebeef79.jpg?format=auto&amp;width=750&amp;quality=75 750w, https://staging.nathabit.in/_nat/images/face_malai_mobile_4c3ebeef79.jpg?format=auto&amp;width=828&amp;quality=75 828w, https://staging.nathabit.in/_nat/images/face_malai_mobile_4c3ebeef79.jpg?format=auto&amp;width=1080&amp;quality=75 1080w, https://staging.nathabit.in/_nat/images/face_malai_mobile_4c3ebeef79.jpg?format=auto&amp;width=1200&amp;quality=75 1200w, https://staging.nathabit.in/_nat/images/face_malai_mobile_4c3ebeef79.jpg?format=auto&amp;width=1920&amp;quality=75 1920w, https://staging.nathabit.in/_nat/images/face_malai_mobile_4c3ebeef79.jpg?format=auto&amp;width=2048&amp;quality=75 2048w, https://staging.nathabit.in/_nat/images/face_malai_mobile_4c3ebeef79.jpg?format=auto&amp;width=3840&amp;quality=75 3840w" imagesizes="80vw">

Describe the Bug

I have 10 banners on a page.

Only 1st banner is LCP image hence I set priority=true on that banner.
Preload tag is generated and image is fetched of ~600-800px width which is correct size. But the image is fetched again of higher resolution immediately and this higher resolution image is rendered. Effectively negating the presence of preload tag.

This only happens in first banner.

On the remaining 9 banners, priority=false, lower and correct resolution image is used. Resolution is equal to the one fetched in preload tag.

Expected Behavior

Only one LCP image should be fetched and rendered.

Which browser are you using? (if relevant)

Chrome

How are you deploying your application? (if relevant)

Vercel

_NEXT-1497

[gauravsaini964]

I think I have found the issue.

    <meta name="viewport" content="width=device-width, initial-scale=1" />

This should be top statement (atleast before image preload) to report correct device width. Source https://stackoverflow.com/questions/51290584/responsive-img-gets-wrong-images-from-srcset

A couple potential gotchas to double check. Make sure you have in the head so the devices you test on are forced to adopt their real width when loading the page.

I can confirm, if I manually move this tag to top of the html, only the correct image loads :)

You can see this behaviour working correctly in page directory. Added steps to reproduce now.

[gauravsaini964]

@styfle Please check this. Thank you

[styfle]

@gauravsaini964 I am not able to reproduce locally with next dev, or next build && next start or with vc deploy.

Local

Deployment

[styfle]

I see now - I can reproduce when emulating mobile.

This looks like a bug with ReactDOM.preload() so I'll create an upstream issue, thanks!

• Bug: ReactDOM.preload()  facebook/react#27200