Theo's Typesafe Cult•15mo ago

Next.js Image Optimization killing Quality and Saturation

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"
      />

      <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 second image When i add unoptimized:

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

      <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 first 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

GitHub

GitHub - wilsonhou/nextjs-image-bug

Contribute to wilsonhou/nextjs-image-bug development by creating an account on GitHub.

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Next.js Image Optimization killing Quality and Saturation