nextjs - ✅(Solved) Fix `<Image quality={1} />` coerces to `0` instead of `75` by default [1 pull requests, 1 comments, 2 participants]

nextjs2026-02-07 02:42:44

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.

GitHub issue URL

Helpful · Quick feedback

GitHub stats

vercel/next.js#89620•Fetched 2026-04-08 02:02:33

View on GitHub

Comments

Participants

Timeline

Reactions

Author

sigmachirality

Participants

github-actions[bot]

sigmachirality

Timeline (top)

labeled ×2referenced ×2subscribed ×2closed ×1

Fix Action

Fixed

Fixed by PR: fix(image): findClosestQuality returns 0 for low quality values (https://github.com/vercel/next.js/pull/89621)

PR fix notes

PR #89621: fix(image): findClosestQuality returns 0 for low quality values

Repository: vercel/next.js
Author: sigmachirality
State: closed | merged: True
Link: https://github.com/vercel/next.js/pull/89621

Description (problem / solution / changelog)

Fixes #89620

Fix findClosestQuality returning 0 when the quality prop on <Image> is set to a low value (e.g. quality={1}), which causes the image optimization server to reject the request with a 400 error.

Cause

The reduce call in findClosestQuality used 0 as its initial accumulator. Since 0 is not a valid quality value (must be 1-100), it would win the "closest" comparison for any quality <= 37 with the default qualities: [75] config. This produced q=0 in the image URL, which the server rejects.

Fix Description

Changed the reduce initializer from 0 to config.qualities[0]. This is safe because the early return above already handles the empty array case, so config.qualities[0] is always defined when reached.

Added a unit test for quality=1 with qualities=[75] to verify it returns 75 instead of 0.

Changed files

packages/next/src/shared/lib/find-closest-quality.ts (modified, +1/-1)
test/unit/image-optimizer/find-closest-quality.test.ts (modified, +12/-0)

Code Example

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.6.0: Wed Oct 15 21:12:05 PDT 2025; root:xnu-11417.140.69.703.14~1/RELEASE_ARM64_T6030
  Available memory (MB): 36864
  Available CPU cores: 12
Binaries:
  Node: 24.13.0
  npm: 8.4.1
  Yarn: 1.22.19
  pnpm: 9.14.2
Relevant Packages:
  next: 16.2.0-canary.30 // Latest available version is detected (16.2.0-canary.30).
  eslint-config-next: N/A
  react: 19.2.3
  react-dom: 19.2.3
  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/sigmachirality/nextjs-image-quality-coercion-bug

To Reproduce

Start the application in development (pnpm dev)
Notice how the first image is broken, and inspect the network request to see that the URL contains q=0 instead of a valid quality value.

Current vs. Expected behavior

Following the note in the changelog as follows:

Changed from [1..100] to [75]; quality prop is now coerced to closest value in images.qualities

I expect quality=[1] to coerce to 75 by default. Instead it is coerced to 0.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.6.0: Wed Oct 15 21:12:05 PDT 2025; root:xnu-11417.140.69.703.14~1/RELEASE_ARM64_T6030
  Available memory (MB): 36864
  Available CPU cores: 12
Binaries:
  Node: 24.13.0
  npm: 8.4.1
  Yarn: 1.22.19
  pnpm: 9.14.2
Relevant Packages:
  next: 16.2.0-canary.30 // Latest available version is detected (16.2.0-canary.30).
  eslint-config-next: N/A
  react: 19.2.3
  react-dom: 19.2.3
  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)

Vercel (Deployed)

Additional context

Here is an image of the site:

Also s/o to @JohnPhamous as his background fog (where he set quality extremely low deliberately) is how we discovered this issue.

extent analysis

TL;DR

The issue can be fixed by setting the quality prop to a value within the valid range of 75 or by configuring the images.qualities option in Next.js to include the desired quality value.

Guidance

Verify that the quality prop is being passed correctly to the next/image component and that it is not being overridden elsewhere in the code.
Check the Next.js configuration to ensure that the images.qualities option is set to include the desired quality value, as the default value is 75.
Test the application with different quality prop values to see if the issue persists.
Consider updating the next package to a newer version if available, as the current version is a canary release.

Example

No code snippet is provided as the issue is related to configuration and prop passing.

Notes

The issue seems to be related to the new behavior in Next.js 16, where the quality prop is coerced to the closest value in images.qualities. The current configuration and code need to be reviewed to ensure that the desired quality value is being used.

Recommendation

Apply workaround by setting the quality prop to a value within the valid range of 75 or configuring the images.qualities option in Next.js to include the desired quality value, as updating to a fixed version is not 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?

#prompt formatting #chain error #conversation history #tool integration #LLM response

Still need to ship something?

×6

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

Data

Security

Network

Code

UI/UX

Text

System

Multimedia

Protocol

API

Engineering

nextjs - ✅(Solved) Fix `<Image quality={1} />` coerces to `0` instead of `75` by default [1 pull requests, 1 comments, 2 participants]

Recommended Tools

GitHub issue graph ai analysis

Fix Action

Fixed

PR fix notes

PR #89621: fix(image): findClosestQuality returns 0 for low quality values

Description (problem / solution / changelog)

Cause

Fix Description

Changed files

Code Example

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Provide environment information

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

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

Additional context

extent analysis

TL;DR

Guidance

Example

Notes

Recommendation

Still need to ship something?

TRENDING

nextjs - ✅(Solved) Fix `<Image quality={1} />` coerces to `0` instead of `75` by default [1 pull requests, 1 comments, 2 participants]

Recommended Tools

GitHub issue graph ai analysis

Fix Action

Fixed

PR fix notes

PR #89621: fix(image): findClosestQuality returns 0 for low quality values

Description (problem / solution / changelog)

Cause

Fix Description

Changed files

Code Example

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Provide environment information

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

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

Additional context

extent analysis

TL;DR

Guidance

Example

Notes

Recommendation

Still need to ship something?

RELATED_DISCOVERY

TRENDING