Next.js Image Component Not Displaying WebP Format Correctly on Safari 15
I'm having a hard time understanding I am experiencing an scenario with the `<Image>` component from Next.js (version 12.0.7) where images in WebP format are not rendering correctly on Safari 15. When I serve images using WebP, they appear as blank spaces instead of the actual images. I have verified that the images are accessible directly through their URLs, and this scenario seems to occur only on Safari. I have already tried using the `unoptimized` prop in the `<Image>` component and confirmed that my `next.config.js` has the correct domain set up for the images: ```javascript module.exports = { images: { domains: ['example.com'], }, }; ``` Additionally, I've made sure to include fallback formats, as shown below: ```javascript <Image src="https://example.com/image.webp" alt="Example Image" width={500} height={300} priority /> ``` I’ve also attempted to serve PNG images as a test, which worked fine, confirming that the scenario is specifically with the WebP format and Safari. I’ve searched through the issues on GitHub and couldn’t find anything that directly addresses this question. Is there a known workaround or additional configuration needed for Next.js to ensure that WebP images display correctly across all browsers, especially Safari? Any insights would be appreciated! What's the best practice here?