Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Image without priority gets preloaded if it is set to loading="eager" #74234

Open
derweili opened this issue Dec 23, 2024 · 0 comments
Open

Image without priority gets preloaded if it is set to loading="eager" #74234

derweili opened this issue Dec 23, 2024 · 0 comments
Labels
bug Issue was opened via the bug report template. Image (next/image) Related to Next.js Image Optimization.

Comments

@derweili
Copy link

derweili commented Dec 23, 2024 •
edited
Loading

Link to the code that reproduces this issue

https://github.com/derweili/next-image-preload-test

Deployed on Vercel: https://image-preload-test.vercel.app/

To Reproduce

  1. Add an image using the <Image> tag to your page.
  2. Set the image to load eager using <Image loading="eager" />
  3. On the frontend, inspect the code, especially the document head <head>.
  4. In the <head> you will find a preload link for this image <link rel="preload" as="image"> altough you didn't set the priority param

Current vs. Expected behavior

Current behavior:
When a image is set to load eager by loading="eager" it gets preloaded.

Example:

<Image src="https://picsum.photos/seed/priority/400/300" alt="Logo" width={400} height={300} priority **/>**
<Image src="https://picsum.photos/seed/no-priority-loading-eager/400/300" alt="Logo" width={400} height={300} loading="eager" />

In this example, only the first image has set priority while the second does not have the priority tag but is only set to loading eager.
However, currently both get preloaded using a preload link.

Expected behavior
If a image is set to loading="eager" without priority it should not get preloaded.
Only images with priority should get preloaded.

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 23.6.0: Thu Sep 12 23:35:29 PDT 2024; root:xnu-10063.141.1.701.1~1/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 10
Binaries:
  Node: 20.12.2
  npm: 10.5.0
  Yarn: 1.22.22
  pnpm: 9.0.4
Relevant Packages:
  next: 14.2.5 // An outdated version detected (latest is 15.1.2), upgrade is highly recommended!
  eslint-config-next: 14.2.21
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.7.2
Next.js Config:
  output: N/A


This issue can be replicated with next@14 and next@15

Which area(s) are affected? (Select all that apply)

Image (next/image)

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local), Vercel (Deployed)

Additional context

I tested app router and pages router, this issue only happens on app router, but not on pages router. On pages router, only the image with priority gets preloaded.

I tested various versions and could replicate the issue from [email protected] (with react@18) to the latest canary versions 15.1.1-canary.17 and [email protected] (both with react@19).

I noticed that when editing component, the wrong preload link sometimes gets removed during HMR. But when doing a hard refresh, its rendered again.

The preload link is included in the SSR response, so its no a client side rendering issue.
@derweili derweili added the bug Issue was opened via the bug report template. label Dec 23, 2024
@github-actions github-actions bot added the Image (next/image) Related to Next.js Image Optimization. label Dec 23, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Issue was opened via the bug report template. Image (next/image) Related to Next.js Image Optimization.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@derweili