next/image produces placeholders that render extremely slowly in firefox
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 142k
- Forks
- 32.4k
- Avg merge
- 2d 14h
- Merged PRs (30d)
- 351
Description
Link to the code that reproduces this issue
https://github.com/RJWadley/next-image-slow
To Reproduce
- render an image using next/image
- build and serve the site
- 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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked next-image-slow reproduction: build and serve it, then compare placeholder paint profiles in Firefox and Chrome. Inspect the linked CodePen and related Mozilla bug reports for the slow blur behavior. Done means next/image placeholders render reasonably in supported browsers without the reported Firefox delay.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, nextjs, react
- Domain
- frontend, performance, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 32/100