webp has recently been supported by Webflow! So i converted all the image of the website to webp format. In the Chrome browser it works great but in Safari Version 15.0 the images are not loaded. It should already be supported in this version of the browser.
Safari 15 fully supports webp, but requires Mac OS 11 Big Sur or later.
So if you run an older OS this probably causes the images to fail.
Here’s the list of the supported browser versions:
so the idea is to request user to not use an older version of Mac;)?
Or to detect the user mac version… webP looks messy to me at that point honestly
3 Likes
Yes kinda…
It would make much more sense if Webflow would always keep the JPG or PNG when you convert it to WEBP so that all the users that can’t load the WEBP file will get the original JPG or PNG file.
I don’t know why Webflow decided not to do this. Until then this feature doesn’t seem to be worth using in real projects.
6 Likes
You might be waiting a long time. 96% coverage for Webp means this will only be increasing and reducing the likelihood of using a fallback, which you can do now manually.
1 Like
What system version do you have installed. I have Catalina here, it doesn’t work there either. Probably only from Big Sur. 
I work on Monterey.
WebP has no support for Catalina. As you mentioned you need at least Big Sur.
But I think for a client website its not an option to request visitors to have at least Big Sur. There are still many people using older OS versions.
So I suggest not using this feature until either Webflow implements a fallback or until most people switched to Big Sur or later.
1 Like
Hey! Just ran into this on a client site… But I may have found a solution (see below). It uses a polyfill to support a newer feature in old browsers. It’s converting all your webp images back to jpg’s or png’s on the fly using a Google Conversion Library.
Step 1: Go ahead and load these two scripts in your global site custom code
<script src="https://unpkg.com/webp-hero@0.0.2/dist-cjs/polyfills.js"></script>
<script src="https://unpkg.com/webp-hero@0.0.2/dist-cjs/webp-hero.bundle.js"></script>
Step 2: Add this code to every page on your site. The easiest way I found was to just drop it in a hidden embed in my global nav component
<script>
var webpMachine = new webpHero.WebpMachine()
webpMachine.polyfillDocument()
</script>
I don’t have an older mac to be able to test this. But I have spoofed my user agent to an old MacOS/Safari version and it seems to be loading properly.
Let me know if this helps!
3 Likes