Image Optimization with Next.js Failing on High-Resolution Displays
This might be a silly question, but I'm a bit lost with I'm trying to optimize images in my Next.js application, specifically for high-resolution displays (like Retina displays)..... I've set up my `<Image>` components to use the `srcSet` attribute to provide different resolutions, but I'm noticing that the images are still loading larger than necessary, causing a performance hit. I want to ensure that users on high-DPI devices receive the appropriate image size without sacrificing quality. Here's the code I've been using for the image component: ```jsx import Image from 'next/image'; const MyComponent = () => { return ( <Image src="/images/sample.jpg" alt="Sample Image" width={800} height={600} quality={75} srcSet="/images/sample-1x.jpg 1x, /images/sample-2x.jpg 2x" /> ); }; ``` When I inspect the network requests in Chrome, I see that it is still fetching the `sample-2x.jpg` for all devices, which is not what I expected. I've also tried adjusting the `sizes` attribute to dictate how much space the image can take in the layout: ```jsx <Image src="/images/sample.jpg" alt="Sample Image" width={800} height={600} sizes="(max-width: 600px) 100vw, 800px" quality={75} /> ``` But I still see it pulling the larger image for devices that don't need it. My Next.js version is 12.3.0, and I've checked that my images are correctly optimized in the public folder. Is there something I'm missing or a configuration I need to adjust to ensure that the correct images load based on device resolution? Any help would be appreciated! For reference, this is a production mobile app. Thanks for any help you can provide! I'm using Javascript 3.10 in this project. Any ideas what could be causing this? What's the best practice here? I'm using Javascript LTS in this project. Cheers for any assistance! The project is a service built with Javascript.