Next.js Image Component scenarios to Serve WebP Format with Custom Domains
I'm using the Next.js Image component to serve images for my e-commerce site, and I've encountered a frustrating scenario. My images are not being served in the WebP format when requested from a custom domain. I have the `images` configuration set in `next.config.js` for my external image domains, but the output is still in JPEG format. Here's my configuration: ```javascript module.exports = { images: { domains: ['mycustomdomain.com'], formats: ['image/avif', 'image/webp'], }, }; ``` I've confirmed that my source images are in JPEG format, and they are accessible from the custom domain. However, when I inspect the network requests in the browser, I see that the `content-type` is always `image/jpeg`, even when I specify the `priority` prop in the Image component: ```jsx <Image src="https://mycustomdomain.com/images/product.jpg" alt="Product" width={500} height={500} priority /> ``` I've also tried clearing my cache and checking different browsers, but the images still refuse to convert to WebP. The Next.js version I'm using is 13.0.0. I expected Next.js to automatically optimize the images to the best format based on the user's browser capabilities. Is there something I might be missing in the configuration, or is this a known limitation with custom domains? Any help would be greatly appreciated! The stack includes Javascript and several other technologies. Any help would be greatly appreciated!