Next.js Image Component Displaying Blurry Images on High DPI Screens
I've spent hours debugging this and I need some guidance on I'm relatively new to this, so bear with me. I'm experiencing an scenario with the Next.js Image component where images end up looking blurry on high DPI (Retina) screens. I’ve set the `src` and `width`/`height` attributes correctly, but when I inspect the images on a Retina device, they don't seem to be rendering at the expected resolution. I've tried using different formats (JPEG and PNG) and adjusting the `quality` prop, but the images still appear pixelated. Here’s the code where I define the image component: ```jsx import Image from 'next/image'; function MyComponent() { return ( <Image src="/images/photo.jpg" alt="A beautiful view" width={800} height={600} quality={100} layout='responsive' /> ); } ``` In this setup, the original image is actually 1600x1200 pixels, which should ideally render crisply on high DPI screens. I’ve also confirmed that the image is being served at the correct size by checking the Network tab in the browser's developer tools. Additionally, I've ensured that the `next/image` package is updated to the latest version (13.2.0). However, I still see this scenario continue. I wonder if there’s some configuration I'm missing or if there's an additional CSS rule that could be affecting how the image is displayed. Has anyone else encountered this question or have suggestions on how to resolve the blurriness on Retina displays? Any examples would be super helpful. I'd love to hear your thoughts on this. Any pointers in the right direction?