Next.js Image Component Not Rendering WebP Format Images in Firefox with Custom Size Attributes
I tried several approaches but none seem to work... I'm using the Next.js Image component to display images in my application, and I'm working with a frustrating scenario where WebP format images unexpected result to render properly in Firefox when I specify custom width and height attributes. In my code, I'm trying to use the following implementation: ```jsx import Image from 'next/image'; const MyComponent = () => { return ( <Image src="/path/to/image.webp" alt="A descriptive alt text" width={800} height={600} layout="responsive" /> ); }; export default MyComponent; ``` In this case, the image does not appear at all in Firefox, but it works perfectly in Chrome and Safari. I checked the console and there are no behavior messages related to the image itself, but I do see a warning about unsupported format when the page loads: ``` Warning: The image format is not supported in this browser. ``` I've attempted to adjust the dimensions of the image, switch to a different image format (like PNG), and even removed the `layout` prop to see if that changes anything, but nothing seems to help. I also made sure that my Next.js version is 13.2.0, as I heard there were improvements related to image handling in the latest updates. Is there any way to ensure that WebP images render correctly across all browsers, especially in Firefox? Could this be an scenario with my image optimization settings, or is it related to the way Next.js handles browser compatibility? Any insights or workarounds would be greatly appreciated! What am I doing wrong?