<Image/> causing image degradation

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

  Node: 16.13.2
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant packages:
  next: 12.2.3-canary.12
  eslint-config-next: 11.1.2
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

Chrome 103.0.5060.114

How are you deploying your application? (if relevant)

No response

Describe the Bug

Using the <Image/> tag and adding a specific width & height to an image that is much larger than that and adding the CSS property object-fit: cover; causes the image’s resolution to degrade by a lot. When we switch to the normal HTML tag with the same image, width, and CSS, the image is displayed fine in full resolution.

Expected Behavior

The image quality should not degrade like this and it should keep full resolution

Link to reproduction

https://codesandbox.io/s/romantic-vaughan-j332co?file=/pages/index.tsx

To Reproduce

Use <Image/> to display an image, style it with object-fit: cover (I used tailwindcss to achieve this here) and put a width and height that’s smaller than the original image

            <Image
              src={"/image.png"}
              className="object-cover"
              width={300}
              height={550}
            />

Check link for comparison with <img/> with the same styling

[iljamulders]

I think you are changing the aspect ratio of the image with your width & height?

use layout fill with objectFit cover

Docs: https://nextjs.org/docs/api-reference/next/image#objectfit Demo: https://image-component.nextjs.gallery/layout-fill

import step2banner from "../public/step2banner.png";

<Image
    alt="Step 2 banner"
    layout="fill"
    objectFit="cover"
    src={step2banner}
/>

https://codesandbox.io/s/proud-sea-3oo17s

[A7U]

Just tried quality={100}, and the extremely bad quality is still the same, so that’s not the issue sadly.