👀 Views: 289 💬 Answers: 1 📅 Created: 2025-07-02

next.js image-optimization webp safari javascript

This might be a silly question, but I am currently using the Next.js Image component (v12.2.0) to serve images in WebP format for better performance. However, when testing in Safari, I'm noticing that the images unexpected result to load properly and instead show a broken image icon. The expected behavior is for Safari to fallback to the JPEG version, but it seems to be ignoring the fallback altogether. I've implemented the images like this: ```jsx import Image from 'next/image'; const MyComponent = () => { return ( <Image src="/images/photo.webp" alt="An example image" width={500} height={400} priority placeholder="blur" blurDataURL="/images/photo-placeholder.jpg" /> ); }; ``` In my public/images directory, I also have the JPEG version of the image named `photo.jpg`. I confirmed that the JPEG image loads correctly when accessed directly, and I've cleared the cache in Safari. However, the WebP image results in the following behavior in the console: ``` Failed to load resource: the server responded with a status of 404 (Not Found) ``` I've tried moving the images to different folders and adjusting the path, but Safari continues to unexpected result to render the WebP format and does not switch to the fallback. I also looked into the server configuration to ensure WebP is supported and it looks fine. Is there any additional configuration I might be missing, or is there a known scenario with WebP images in Safari when using the Next.js Image component? Any ideas on how to resolve this would be greatly appreciated. I'm working in a Ubuntu 20.04 environment.