Image src that includes more than 1 query param results in broken output

Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/reverent-http-v2ycvz

To Reproduce

1. Start the sandbox
2. Inspect the html in the network monitor

Current vs. Expected behavior

Attribute that contains an url with more than 1 query param results in broken encoded output. Browsers seem able to recover from this mistake and fetch the correct url, but crawlers etc do not.

<link rel="preload" href="https://picsum.photos/id/870/200/300?grayscale=1&amp;blur=2" as="image"/>
<div>
  <img src="https://picsum.photos/id/870/200/300?grayscale&amp;blur=2">
</div>

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
  Available memory (MB): 4102
  Available CPU cores: 2
Binaries:
  Node: 20.9.0
  npm: 9.8.1
  Yarn: 1.22.19
  pnpm: 8.10.2
Relevant Packages:
  next: 15.6.0-canary.38 // Latest available version is detected (15.6.0-canary.38).
  eslint-config-next: N/A
  react: 19.1.1
  react-dom: 19.1.1
  typescript: 5.3.3
Next.js Config:
  output: N/A

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

Output, Image (next/image)

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

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

Additional context

No response

Start with the linked CodeSandbox reproduction and inspect the generated HTML in the network monitor, focusing on the next/image output with multiple query parameters. Done means the emitted image URL preserves all query parameters correctly so browsers and crawlers fetch the intended URL.