Next.js Image Component Ignoring Image Optimization Settings for Large PNGs
I'm learning this framework and I've searched everywhere and can't find a clear answer. I'm experiencing an scenario with the Next.js Image component where it seems to ignore my optimization settings for large PNG files. I'm using Next.js version 12.2.0, and I've set up my images like this: ```javascript import Image from 'next/image'; const MyComponent = () => { return ( <div> <Image src="/path/to/large-image.png" alt="Large Image" width={800} height={600} priority /> </div> ); }; export default MyComponent; ``` In my `next.config.js`, I've also configured the image settings like so: ```javascript module.exports = { images: { domains: ['example.com'], deviceSizes: [640, 750, 1080, 1200, 1920], imageSizes: [16, 32, 48, 64, 128], loader: 'default', }, }; ``` When I test the page, the large PNG loads very slowly compared to JPEG images of the same dimensions. I noticed that the network tab shows the PNG file being served directly from the server without optimization—in fact, it’s not even being converted to WebP as I expected. I tried changing the image format to JPEG, and it optimized correctly, but I need to use PNG for this particular asset. Additionally, I’ve attempted to clear the Next.js cache with `next build` and `next start` commands, but that didn’t resolve the scenario. I also checked for errors in the console, but there are none related to image loading. Is there a specific setting or best practice I might be missing to ensure that large PNG images are optimized and served correctly in Next.js? Any insights would be greatly appreciated. I'm working on a application that needs to handle this. This issue appeared after updating to Javascript 3.11. Am I approaching this the right way? Any ideas how to fix this?