next/Image change the color of the images

GabVlado commented 3 years ago

What version of Next.js are you using?

10.0.9

What version of Node.js are you using?

15.4.0

What browser are you using?

Chrome

What operating system are you using?

Windows

How are you deploying your application?

LocalHost / npm build , npm start

Describe the Bug

The next/Image change the color of the images. I think it happens at the time of next/Image optimization

Expected Behavior

Don´t change the color with next/image component.

To Reproduce

I use npx create-next-app NO external libraries, or frameworks of CSS.

"dependencies": { "next": "10.0.9", "react": "17.0.2", "react-dom": "17.0.2" }

<div>
  <Link href="/" >
    <a>
      <Image
        src="/Logo_ML.png"
        alt="Mercado Libre"
        height={36}
        width={53}
        layout="fixed"
        quality={100}
      />
    </a>
  </Link>
  <img src="/Logo_ML.png" alt="logo"/>
</div>

img - without next

Good

Image - with next

bad

Also in the background color of the logo yellow

ORIGINAL img.png Logo_ML

FDiskas commented 3 years ago

Would be nice if you upload original and compressed one

balazsorban44 commented 2 years ago

I believe this is expected. This might be due to the actual compression which is lossy operations, and you might naturally lose some colors as multiple colors are downsampled to fewer ones to spare space.

balazsorban44 commented 2 years ago

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

vercel / next.js