10.0.8 next/image double images

[kush-agra]

What version of Next.js are you using?

10.0.8

What version of Node.js are you using?

15.2.0

What browser are you using?

Chrom, Safari, Firefox

What operating system are you using?

macOS

How are you deploying your application?

next start

Describe the Bug

Many of the images show up duplicated after being compressed from next/image and also have a greenish hue to them, this fixes itself if unoptimized is set to true, can also be reproduced in 10.0.9-canary.4 but not in 10.0.7. Possibly related to #22253

Expected Behavior

Image just appearing once in the correct size and colours as they used to

To Reproduce

The code below is able to reproduce the issue

import Image from "next/image";

export default function Demo() {
    return (
        <Image src={"https://i.imgur.com/WCcL3Ip.png"} alt={""}
               width={36} height={36}/>
    )
}

Image before conversion

Image after conversion

[shuding]

Can reproduce the bug, and confirmed it's a problem with Squoosh CLI:

[shuding]

With some further investigation I found that it's related to PNG with grayscale and alpha.

› file WCcL3Ip.png
WCcL3Ip.png: PNG image data, 36 x 36, 8-bit gray+alpha, non-interlaced

Opened an issue for Squoosh (GoogleChromeLabs/squoosh#971). A temporary work around is to avoid using gray+alpha PNGs. When it's 8-bit/color RGBA it will be handled correctly again.

Related: http://www.libpng.org/pub/png/book/chapter08.html#png.ch08.div.5.4. These images can also reproduce the bug.

[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.