Next.js Image Component Not Rendering WebP Format Images on Safari 15+
Can someone help me understand I've searched everywhere and can't find a clear answer... I'm currently working with an scenario with the Next.js Image component where images in WebP format are not rendering correctly in Safari 15 and above. The images load fine in Chrome and Firefox, but on Safari, they result in a blank space. I've verified that the images are properly encoded and can be accessed directly via their URLs. Here's how I'm implementing the Image component: ```javascript import Image from 'next/image'; const MyComponent = () => { return ( <div> <Image src='https://example.com/image.webp' alt='Sample WebP Image' width={500} height={300} layout='responsive' /> </div> ); }; export default MyComponent; ``` I've also tried using a fallback to a PNG format when WebP fails, but that doesn't seem to work either. The fallback code looks like this: ```javascript <Image src={isWebPSupported ? 'https://example.com/image.webp' : 'https://example.com/image.png'} alt='Sample Image' width={500} height={300} /> ``` The `isWebPSupported` function checks for WebP support in the browser, and it seems to return false in Safari. I'm also seeing the following behavior messages in the console: ``` Image failed to load: the resource is not supported ``` I've tried updating my Next.js version from 12.1.0 to 12.3.0, but the scenario continues. Is there a known scenario with the Image component and WebP support in Safari 15+? What can I do to troubleshoot or resolve this? I'm working on a service that needs to handle this. This is part of a larger application I'm building. I'm coming from a different tech stack and learning Javascript.