Image component shows compression artifacts, and increases the image's size, on very small pngs

[city41]

Link to the code that reproduces this issue

https://github.com/city41/next-image-compression-issue

To Reproduce

Run the next-image-compression-issue app, then compare the two images in Chrome. I am using Chrome 130.0.6723.69

Current vs. Expected behavior

expected: the image is crisp and clear
actual: the image has compression artifacts and a noticeable reduction of color.

The difference is most obvious on the right. The dog has a reduction in color and overall clarity, and the blue stripes (which are a single blue color in the original png) take on artifacts from the dog.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #134-Ubuntu SMP Fri Sep 27 20:20:17 UTC 2024
  Available memory (MB): 32025
  Available CPU cores: 8
Binaries:
  Node: 18.18.2
  npm: 9.8.1
  Yarn: 1.22.21
  pnpm: N/A
Relevant Packages:
  next: 15.0.2 // Latest available version is detected (15.0.2).
  eslint-config-next: 15.0.2
  react: 19.0.0-rc-02c0e824-20241028
  react-dom: 19.0.0-rc-02c0e824-20241028
  typescript: 5.6.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), Vercel (Deployed)

Additional context

The original png image is only 713 bytes. The webp that Image produces is 884 bytes. So it's a double whammy of worse quality and larger file size.

[city41]

I forgot to mention, this happens seemingly regardless of the quality prop. Setting it to 100 still has the compression related issues.

[ucarno]

As a workaround, you can make pixel art images unoptimized:
https://nextjs.org/docs/app/api-reference/components/image#unoptimized

[city41]

Oh cool, I didn't know that prop was available. I see it's not in the summary of props but is listed down below, so I missed it.

I'd even say this is not a workaround but the solution.

Thanks!

[styfle]

The original png image is only 713 bytes

You shouldn't try to optimize an image this small since its unlikely to get any smaller. You can set unoptimized: true to bypass the image optimization api and serve the image as-is.

We could probably add a heuristic in the api to detect images less than 1KB and serve as-is.

Or we could detect if the output is bigger than the input and serve the input.

Do you want to submit a PR?

[city41]

I think using unoptimized is a good solution. My bad I missed it in the docs

[styfle]

I'll update the docs to make this a little more clear:

• chore(docs): mention uses for unoptimized #73604

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.