Skip to content

Image component unoptimized property cannot override next.config.ts unoptimized setting #85208

@y-hsgw

Description

@y-hsgw

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Image (next/image)Related to Next.js Image Optimization.

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions