Loading webp images on Safari

Design help General
3

Hey! There is code that should do this on Safari and older browsers that don’t support WebP

Here’s what you should do:

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!

1 Like