Issue Station
Sign In
Tools hereToolbox

nextjs - ✅(Solved) Fix Image component unoptimized property cannot override next.config.ts unoptimized setting [1 pull requests, 1 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#85208•Fetched 2026-04-08 02:17:06
View on GitHub
Comments
0
Participants
1
Timeline
3
Reactions
2
Author
y-hsgwy-hsgw
Participants
y-hsgwy-hsgw
Timeline (top)
cross-referenced ×1issue_type_added ×1labeled ×1

Fix Action

Fixed

PR fix notes

PR #85314: fix(next/image): allow per-image unoptimized={false} to override images.unoptimized=true

Description (problem / solution / changelog)

What:

  • Respect explicit Image prop unoptimized={false} over global images.unoptimized, while retaining auto-unoptimized for data:/blob: and default-loader SVG.

Why:

  • Fixes #85208 where a per-image override could not opt back into optimization.

How:

  • Compute an effective flag once (should/effectiveUnoptimized) based on: data/blob → true; default loader + SVG (when not allowed) → true; else explicit prop if provided; else config default. Use the resolved flag for generateImgAttrs, meta, and export mode checks.

Tests:

  • Added unit tests: test/unit/next-image-get-img-props.unoptimized-override.test.ts

Changed files

  • packages/next/src/shared/lib/get-img-props.ts (modified, +19/-10)
  • test/unit/next-image-get-img-props.unoptimized-override.test.ts (added, +106/-0)

Code Example

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: 16.0.0-canary.18 // Latest available version is detected (16.0.0-canary.18).
  eslint-config-next: N/A
  react: 19.2.0
  react-dom: 19.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A
RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/hungry-sunset-wnyxfj

To Reproduce

  1. In next.config.ts, set images.unoptimized: true.
  2. Use the Image component with the prop unoptimized={false}.
  3. Observe that the Image component does not optimize the image as expected.

Current vs. Expected behavior

Current: When images.unoptimized: true is set in next.config.ts, specifying unoptimized={false} on an Image component does not override the config, and the image remains unoptimized.

Expected: When unoptimized={false} is set on the Image component, it should override the global config and optimize the image. This allows for more granular control per image.

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: 16.0.0-canary.18 // Latest available version is detected (16.0.0-canary.18).
  eslint-config-next: N/A
  react: 19.2.0
  react-dom: 19.2.0
  typescript: 5.3.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 dev (local), next build (local), next start (local), Vercel (Deployed), Other (Deployed)

Additional context

Use case: In our application, we want to display user-uploaded images without optimization, but optimize static images and other assets. The current behavior does not allow this, as the Image component's prop cannot override the config.

Expected: Having the ability to override the global config per image would enable this flexibility.

extent analysis

TL;DR

The issue can be resolved by setting unoptimized to false for specific images in the next.config.ts file or by using a custom solution to override the global config.

Guidance

  • Review the next.config.ts file to understand how the images.unoptimized property is being used and consider setting it to false for specific images.
  • Investigate using a custom solution, such as a wrapper component, to override the global config and optimize specific images.
  • Verify that the unoptimized prop is being passed correctly to the Image component and that it is not being overridden by other config settings.
  • Check the Next.js documentation for any updates or changes to the images.unoptimized property and its behavior.

Example

// Custom Image component to override global config
import Image from 'next/image';

const OptimizedImage = ({ src, ...props }) => {
  return <Image src={src} unoptimized={false} {...props} />;
};

Notes

The current behavior of the images.unoptimized property may be a limitation of the Next.js version being used, and upgrading to a newer version may resolve the issue. However, without further information, it is difficult to determine the exact cause of the problem.

Recommendation

Apply a workaround, such as using a custom solution to override the global config, as the current behavior of the images.unoptimized property may not allow for the desired level of control.

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…
#optimization#training loop#device allocation#model download#tokenizer error

Still need to ship something?

×6

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

Back to top recommendations

TRENDING