Next.js Image Component Blurry on High-Resolution Screens Despite Correct Sizing
I'm working on a project and hit a roadblock. I'm using the Next.js Image component version 12.3.0 for my project, but I'm working with an scenario where images appear blurry on high-resolution (Retina) displays even though I have specified the `width` and `height` attributes correctly. I have images in both PNG and JPEG formats, and I've set the `quality` prop to 100 for the images. Here’s a simple implementation: ```jsx import Image from 'next/image'; const MyComponent = () => { return ( <Image src="/images/example.png" alt="Example Image" width={800} height={600} quality={100} layout="responsive" /> ); }; ``` While testing on a MacBook Pro with Retina display, the images look pixelated and not sharp. I’ve also tried adjusting the `layout` prop to both `fixed` and `intrinsic`, but the scenario continues. When I inspect the images in the browser, it appears that the browser is scaling the images down rather than displaying them at their native resolution. I've checked the image file sizes and they seem appropriate, but I’m not sure if there's something I'm overlooking in my configuration or the way I'm using the Image component. Is there a best practice for ensuring sharp images on high-DPI screens in Next.js? Any guidance would be greatly appreciated! For context: I'm using Javascript on Linux. I'd really appreciate any guidance on this.