next/image optimized image does not look like original image

[davidgaspardev]

What version of Next.js are you using?

11.0.1

What version of Node.js are you using?

15.7.0

What browser are you using?

Safari

What operating system are you using?

macOS

How are you deploying your application?

yarn dev

Describe the Bug

I am using the Next.js Image component and when it is reered to Image in the browser, the image is damaged, but when I use the normal img HTML element the image is normal, but the deploy requires next/image.

There is another image very similar to this that works normally.

Expected Behavior

Expected Behavior is the TeamViewer icon image normally render like AnyDesk.

To Reproduce

import Image from 'next/image'

export default function Test() {
  return (
    <div>
      { /** Team Viewer button (link) */}
      <div className="floating-button" style={{ backgroundColor: "var(--color-teamviewer)", right: 160 }} >
          <Image 
            src={"/images/png/teamviewer.png"}
            alt="TeamViewer"
            width={24}
            height={24}/>

        <h6>Team Viewer</h6>
      </div>

      { /** AnyDesk button (link) */ }
      <div className="floating-button" style={{ backgroundColor: "var(--color-anydesk)" }} >
        <Image 
          src={"/images/png/anydesk.png"}
          alt="AnyDesk"
          width={24}
          height={24} />

        <h6>AnyDesk</h6>
      </div>
    </div>
  );
}

Assets

Result

[styfle]

Looks like a bug with squoosh (the package we use to optimize images)

See GoogleChromeLabs/squoosh#1102

[styfle]

This has been fixed in v11.1.3-canary.46.

You can try it out today with yarn add next@canary, thanks!

[balazsorban44]

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.