Webp image fallback for older browsers [hit or miss solution]

Community resources General
1

UPDATE: this solution is very hit or miss in how it works on older Safari browsers :sob::sob::sob::sob: (so you can test this integration to see if it works for your needs

Hey all! I’ve seen a lot of people mentioning issues with older devices and browsers after converting their images to webp using the new Webflow feature. I ran into this with a client build and set out to find a solution and here it is with just a couple lines of custom code added to your global custom code settings!!!

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/your global custom code below the two scripts above

<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 useragent to an old MacOS/Safari version and it seems to be loading properly

Let me know if this helps/works for you!

(HT @tyeNewton for tracking down more documentation: Webp Hero - browser polyfill for the webp image format - (webp-hero))

1 Like
2

That’s awesome! :star_struck:

I was not aware of it before as we do not have old Macs, and luckily no issues have been raised from clients yet.

I think Webflow should be able or have an option for such compatibility though.

2 Likes
3

I hear you. I’m sure it’s probably slated for a feature improvement at some point :slight_smile:

4

Hey @austin, thanks for sharing. I was about to ask if you could explain what exactly this is doing (since it sounds like pure magic to me), and I quickly found this documentation: Webp Hero - browser polyfill for the webp image format - (webp-hero)

It says it’s converting .png on the fly, right in the browser.

There are a few known issues, though—importantly no CSS background image support!

Given that there’s no way to undo Webflow’s conversion, we better be darn sure everything is working reliably in real browsers (pre Big Sur Safari) before pulling the trigger. I’d strongly recommend testing on a special page hosting 1 or a few WebP images before converting the rest. (I guess I need to figure out which of my friends are still on macOS Catalina.)

EDIT: I suppose I could trust a test of a user-agent switch (to Catalina and older), by first making sure it doesn’t work without the script, then making sure it does work with it.

1 Like
5

Hey! Yeah it does have some limitations good call out. It is converting img tags serving wepb images to img tags serving jpg or png’s.

I believe it is using a google conversion tool

6

I believe it fixed my clients issue with webp’s on Catalina

7

Okay so I did a “test test” to see if user agent spoofing is a reliable check… The result is negative, unfortunately.

  • I’m in Safari on the latest macOS Monterey. I loaded a page with one WebP (converted) image on it. It shows up (as it should) without implementing the script.
  • Then I switched my user agent (Safari menu bar: Develop > User Agent >) to Safari for iPad 13.1.3. The WebP image still loads (without implementing the script). According to "webp" | Can I use... Support tables for HTML5, CSS3, etc iOS Safari 13.1.3 should not support WebP.

So we can’t rely on user agent spoofing to test if this is working. (Correct me if you see anywhere I goofed.)

I know at least one person running Catalina, so I’ll check with them when I get a chance.

2 Likes
8

I have disappointing news about this fallback…
I implemented it to the best of my ability, and the first person I had test it for me was still not able to load the image in Safari on macOS Catalina.

Here’s what I did, in case you can spot a mistake:

  • I added both code snippets above to the global tag of one of my sites.
  • Saved and Published to the webflow.io domain.
  • Had the Catalina Safari user clear cache and use a private browsing window to load the fallback test page I created (with a WebP image) using the webflow.io version of the site.

The page still showed up blank.

Thanks again for sharing this @austin, and please let me know if you see where I may have implemented this incorrectly.

For now, I think I’ll just be sticking with traditional image formats for a long while, still, or until Webflow can implement a native fallback.

(I must agree with others who’ve pointed out that a native-to-Webflow fallback really should have been implemented along with the release of this built-in conversion feature. Webflow’s own messaging on this strongly implies that WebP support is ready for prime time, just because the very latest browser versions support it. It’s naive to assume every visitor to your website is up to date on macOS. My clients’ analytics show that, indeed, they are not. I hope not too many Webflow users have pulled the trigger on this prematurely.)

1 Like
9

Hey, I’ve tested this and it seems to be working for my client on Catalina or earlier so I’m not really sure what might be happening. :sweat_smile::sweat_smile::sweat_smile:

I’m going to dig a bit deeper around what you tested.

10

I’d LOVE to be shown where I goofed! Thanks @austin.

1 Like
11

Circling back to this it looks like it could be very hit or miss even down to the current page load on the site… So it’s not quite as foolproof as it appeared to be. Bummer :sob: :sob: :sob: :sob:

14

Ah bummer indeed. Thanks again for putting heads together on it, though. Hope for a great solution, soon. Cheers!

15

Could always plug-in the browser upgrade prompt — Catalina safari isn’t technically supported by apple anymore (annoying they tie browser updates to OS)