Next.js Image Component Not Optimizing High-Resolution JPEGs on Dynamic Routes
I've looked through the documentation and I'm still confused about I'm sure I'm missing something obvious here, but I'm using the Next.js Image component (version 12.2.0) to display high-resolution JPEG images on dynamic routes. I've set the `quality` prop to 100, expecting the images to be served in their original resolution, but they appear to be downscaled unexpectedly. The output looks blurry on retina displays, and I noticed the images are not being optimized as I anticipated. Here’s a snippet of how I'm using the Image component: ```jsx import Image from 'next/image'; const MyComponent = ({ imageUrl }) => { return ( <div> <Image src={imageUrl} alt="High Res Image" width={1200} height={800} quality={100} layout="responsive" /> </div> ); }; ``` When I inspect the network tab, the images are not served in the expected quality, and I see the following warning in the console: `Image with src 'path/to/image.jpg' is missing required width and height properties.` The dimensions used in the Image component should be correct, so I'm not sure why I'm getting this warning. I’ve also tried setting the `unoptimized` prop to true, hoping it would bypass the optimization process: ```jsx <Image src={imageUrl} alt="High Res Image" width={1200} height={800} quality={100} unoptimized={true} /> ``` However, this causes the images to load slower, and I still experience issues with image quality on high-resolution screens. Has anyone encountered similar problems when using the Image component with high-resolution JPEGs on dynamic routes? Any insights on ensuring the images are served in their original quality would be greatly appreciated. This is part of a larger API I'm building. Any ideas what could be causing this? I'm working on a API that needs to handle this. What's the best practice here? I'm working on a API that needs to handle this. Any help would be greatly appreciated!