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
  • Verify WebP compatibility and ensure images have the correct .webp extension.
  • Test image loading in other browsers to see if the issue is specific to Safari 15.
  • Review Webflow settings for restrictions, media queries, or scripts affecting images.
  • Update Safari and macOS to the latest versions to address compatibility issues.
  • Check that Webflow files are publicly accessible without authentication barriers.

When images in WebP format are not loading in Safari Version 15.0, it can be due to compatibility issues, as WebFlow supports WebP but not all browsers may fully support it yet.

​

1. Verify WebP Compatibility

  • Check Safari's support for WebP format. Safari 15 should support WebP, but it's always good to confirm with the official Apple documentation.
  • Ensure your images are properly converted to WebP format and that their extensions are correctly set to .webp.

​

2. Test Image Loading in Other Browsers

  • Load the same WebP images in other browsers like Chrome or Firefox to confirm that they are not corrupted.
  • Compare the behavior on iOS devices with Safari 15 versus other browsers to identify if the problem is specific to a particular platform.

​

3. Review Webflow Project Settings

  • Go to Project Settings and ensure no settings are restricting image delivery or using specific media queries that could affect Safari.
  • Check any customizations or scripts that may inadvertently block certain image formats.

​

4. Update Safari and MacOS

  • Make sure Safari and your macOS are updated. Apple often releases updates that fix compatibility issues with newer media formats like WebP.

​

5. Check File Accessibility

  • Ensure the files on Webflow are publicly accessible and not behind any kind of authentication that could hinder their loading in Safari.

​

Summary

To address Safari 15 not loading WebP images, check browser support, test images across different platforms, review Webflow settings, ensure Safari is up-to-date, and verify file accessibility. These steps should help pinpoint and resolve the issue with WebP image loading.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How should I handle the homepage of my multilingual website in Webflow when using language-specific folders for each page? How does this affect the setup of hreflang tags and the usage of subdomains?
Can I upload individual html, css, and javascript files as separate pages in Webflow Hosting or do I need to switch to a different hosting provider?
How can I create and upload a apple-app-site-association file and JSON file inside a ".well-known" folder in Webflow?
How can I grab a Webflow collection based on its ID and store it in a variable? Can someone provide a snippet or example image? Also, is there a way to link embedHTML on the same page to share or access variables from each other (top-bottom)?
How to use an SVG shape as a clipping mask for images in Webflow? Can someone provide instructions or a clonable Webflow link to see the code implementation?
How can I change the base breakpoint in Webflow so that the changes I make on one breakpoint do not affect another breakpoint, even if it is the base breakpoint?
How can I resolve the issue of an embedded Vimeo background video on my Webflow website not autoplaying consistently in Chrome and Safari?
How can I style this image in Webflow?
Is it possible to achieve a scrollable content with sticky side navigation using just the Webflow tools, or is custom code required?
How can I pass UTM data from a Webflow popup form to a Hubspot Contact record?
What could be causing the "Undefined value __SitePlugin::[“Used Cars: personalize: trading-in To Text”] error in Webflow when selecting dropdown values on a form submission?
How can I resolve scrolling issues with a dropdown list in Webflow, specifically with a 13" Mac screen that cannot scroll to the bottom of the list?
Is it possible to have a custom form action to pass form data to a URL, while also submitting the form data from page 1 to Webflow using the default action?
How can I make the links in my Webflow navbar take users to the exact start of each section on my home page?
How can I create animations that trigger when scrolling to different sections on my website built with Webflow and using CSS Scroll Snap, even when the "scroll into view" interaction doesn't work correctly?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?