Next.js Image Component scenarios to Optimize PNG Files with Custom Loader for High DPI Screens
I'm integrating two systems and I'm stuck on something that should probably be simple... I'm using the Next.js Image component to serve images on a high-DPI screen, but I've noticed that my PNG images are not being optimized correctly when I use a custom loader. Specifically, I'm trying to serve a PNG icon that looks pixelated on devices with a higher pixel density. I've set up my custom loader like so: ```javascript const customLoader = ({ src, width, quality }) => { return `https://my-image-host.com/${src}?w=${width}&q=${quality || 75}`; }; ``` And I'm using the Image component like this: ```javascript <Image loader={customLoader} src="icon.png" alt="My Icon" width={64} height={64} /> ``` However, when I inspect the image in the browser, I see that the loaded image size does not change based on device pixel ratio. Instead of serving a 128x128 version of the icon on a Retina display, it still loads the 64x64 version. This results in a blurry appearance. I've also tried explicitly setting the `sizes` attribute to prevent this: ```javascript <Image loader={customLoader} src="icon.png" alt="My Icon" width={64} height={64} sizes="(min-width: 768px) 128px, 64px" /> ``` Unfortunately, this doesn't seem to fix the scenario either. The console doesn't throw any specific errors, but the network tab shows that the exact same 64x64 image is being fetched regardless of the device. Is there a way to ensure that the Next.js Image component delivers appropriately sized images based on the device's pixel density when using a custom loader? Any insights or workarounds would be greatly appreciated. For context: I'm using Javascript on macOS. I'm working on a application that needs to handle this. What's the best practice here? My development environment is macOS. For context: I'm using Javascript on Ubuntu 22.04. What's the best practice here?