Why are the images in webp format not loading in Safari Version 15.0, even though webp is supposed to be supported by Webflow?

WebP images may not load in Safari 15.0 due to incomplete support or serving issues. While Safari does support WebP from version 14 onwards, some older versions (including 15.0) may have inconsistencies. Follow these steps to troubleshoot the issue.

1. Confirm WebP Browser Support

• Safari 15.0 should support WebP images, but there were some rendering bugs in early versions of Safari 15.
• Test the same WebP image in another browser (Chrome, Firefox, or Safari 16+). If it loads elsewhere but not in Safari 15.0, the issue is likely Safari-related.

2. Check WebP Image Encoding

• Some WebP files may not be properly encoded. Try converting them again using tools like Squoosh, TinyPNG, or Photoshop.
• Use a different WebP compression setting (lossy vs. lossless) to see if Safari prefers a specific format.

3. Test with a PNG or JPEG Alternative

• Upload both a WebP and a PNG/JPEG version of the same image.
• If the PNG/JPEG loads but the WebP does not, Safari 15.0 may not be handling WebP properly on that device.

4. Disable Lazy Loading for Testing

• Webflow may apply loading="lazy" to images, which can sometimes cause compatibility issues in Safari.
• Temporarily disable lazy loading on the WebP image and check if that resolves the issue.

5. Verify Webflow Hosting & CDN Caching

• Webflow serves assets through a CDN, which can sometimes cache problematic versions of images.
• Try re-uploading the WebP image with a new filename to bypass any CDN caching issues.

6. Upgrade Safari or Use a Workaround

• If Safari 15.0 is the issue, test in Safari 16 or later to confirm the problem is version-specific.
• As a workaround, you can set fallback images using the <picture> element, but Webflow doesn’t offer built-in support for this without custom code.

Summary

Safari 15.0 has partial WebP support, and the issue may stem from encoding, lazy loading, CDN caching, or browser inconsistencies. Test your images in different formats and browsers, re-upload them if needed, and consider upgrading Safari or using fallback images.