Why are the images in webp format not loading in Safari Version 15.0, even though webp is supposed to be supported by Webflow?
TL;DR
- Safari 15.0 has buggy WebP support, so re-export images in standard lossy WebP format and add JPG/PNG fallbacks manually since Webflow doesn’t generate them automatically.
- Test in Safari 16+ to confirm the issue is version-specific, and republish your site to resolve potential CDN caching problems.
WebP images are not loading in Safari 15.0 because that Safari version has known limitations with WebP support, even though Webflow allows use of WebP format.
1. Safari 15.0 Has Partial WebP Support
- WebP support was added in Safari 14, but several bugs remained through 15.0, particularly with specific WebP encoding types, alpha transparency, and server configurations.
- Safari 15.0 may fail to render WebP images properly if the encoding is non-standard or if there's a compatibility issue between the server's response and the browser's decoding logic.
2. Check WebP Encoding Method
- If you're uploading custom-compressed WebP images, they may have been encoded using lossless or unsupported alpha channels that Safari 15.0 can't process.
- Try re-exporting the image using a tool like Squoosh, setting it to lossy WebP with alpha support, and re-upload to Webflow.
3. Fallback Images Are Not Automatically Handled
- Webflow does not auto-generate fallback formats (like JPG/PNG) if you upload only WebP.
- Safari 15.0 will fail to display WebP if no fallback format is defined and can't decode the original file.
4. Server Caching or CDN Issues
- Older versions of Safari have trouble with certain CDN headers and caching rules.
- If you're using Webflow’s CDN, this is usually not the issue, but clearing and republishing your site can force updated image formats to load.
5. Test in Newer Safari Versions
- Safari 16 and above have stable WebP support consistent with Chrome and Firefox.
- Use BrowserStack or a real device to test the same site in Safari 16+ to confirm if it's a browser version issue rather than a Webflow or CDN issue.
6. Use Fallback Format Manually (Optional Fix)
- If backwards compatibility is important, you can manually add an additional image field or use custom code to use
<picture>elements with JPG fallback, though this is not native via Webflow Designer UI.
Summary
Safari 15.0 has incomplete and buggy WebP support, which may cause images to fail loading despite Webflow supporting the format. To fix: re-export WebPs in standard lossy format, add fallbacks if needed, and verify compatibility with modern Safari versions.