Hey yall - unsure if this is a bug in Next.js or if I'm misunderstanding how to use the <Image/> component.

When i have an image component like this:

      <Image
        quality={100}
        placeholder="blur"
        className="object-cover"
        fill
        sizes="100vw"
        src={clouds}
        alt="blue ascii clouds"
      />

the saturation of the original image seems to be toned down (as well as quality, but that's expected from the optimisation process). this is the first image

When i add unoptimized:

      <Image
        unoptimized
        quality={100}
        placeholder="blur"
        className="object-cover"
        fill
        sizes="100vw"
        src={clouds}
        alt="blue ascii clouds"
      />

everything turns out fine. this is the second image

The image is significantly more saturated in its original form.

Why does the Nextjs Image Optimisation process turn down saturation (is this expected behaviour)? How can we work around this without an unoptimized prop?


reproduction here: https://github.com/wilsonhou/nextjs-image-bug