next/image produces placeholders that render extremely slowly in firefox

Why this is a good first issue

Browser-specific rendering issue with unclear root cause.

AI Summary

The issue involves slow rendering of placeholders produced by next/image in Firefox, with potential links to known Firefox bugs. The problem is reproducible and test-focused, but the root cause and solution are unclear, requiring deep browser rendering knowledge.

Issue 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

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

GitHub Labels