nextjs - 💡(How to fix) Fix next/image produces placeholders that render extremely slowly in firefox [2 comments, 2 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
vercel/next.js#86264Fetched 2026-04-08 02:11:47
View on GitHub
Comments
2
Participants
2
Timeline
5
Reactions
0
Author
Participants
Timeline (top)
commented ×2issue_type_added ×1labeled ×1subscribed ×1

Code Example

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.6.0: Mon Jul 14 11:30:29 PDT 2025; root:xnu-11417.140.69~1/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 10
Binaries:
  Node: 22.11.0
  npm: 11.6.0
  Yarn: N/A
  pnpm: 9.15.5
Relevant Packages:
  next: 16.0.2-canary.23 // Latest available version is detected (16.0.2-canary.23).
  eslint-config-next: N/A
  react: 19.2.0
  react-dom: 19.2.0
  typescript: 5.9.3
Next.js Config:
  output: N/A
RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

https://github.com/RJWadley/next-image-slow

To Reproduce

  1. render an image using next/image
  2. build and serve the site
  3. profile the rendering time in firefox and compare it to chrome

To make it a bit easier to see the effect, I've extracted one such image into a codepen and added a toast when slow paints are detected: https://codepen.io/RJWadley/full/jEqmYeO

Current vs. Expected behavior

next/image should produce blurs that render reasonably in all supported browsers

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.6.0: Mon Jul 14 11:30:29 PDT 2025; root:xnu-11417.140.69~1/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 10
Binaries:
  Node: 22.11.0
  npm: 11.6.0
  Yarn: N/A
  pnpm: 9.15.5
Relevant Packages:
  next: 16.0.2-canary.23 // Latest available version is detected (16.0.2-canary.23).
  eslint-config-next: N/A
  react: 19.2.0
  react-dom: 19.2.0
  typescript: 5.9.3
Next.js Config:
  output: N/A

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

Image (next/image)

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

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

Additional context

probably related bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1456932

possible fixing bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1409486

extent analysis

TL;DR

Investigate and potentially apply fixes related to image rendering and browser compatibility, specifically focusing on the next/image component and its interaction with Firefox.

Guidance

  • Review the provided Codepen example and the linked bugs on Bugzilla to understand the rendering issue in Firefox and potential fixes.
  • Verify the rendering time in both Firefox and Chrome to confirm the discrepancy.
  • Check the next/image documentation for any updates or configuration options that may improve rendering performance in Firefox.
  • Consider testing with different image formats or compression settings to see if it affects the rendering time.

Example

No specific code snippet is provided due to the lack of direct code references in the issue.

Notes

The issue seems to be related to a browser-specific problem, and the provided links to Bugzilla bugs may offer insights into fixing or mitigating the issue. However, without direct access to the code or more specific details about the next/image configuration, it's challenging to provide a precise solution.

Recommendation

Apply workaround: Given the potential relationship with browser-specific bugs, applying workarounds related to image rendering and compression might be necessary until a more permanent fix is available.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING