Loading webp images on Safari

Design help General
1

Hi there,

I have uploaded images on to my home page as webp images as I saw that google favours this for SEO. However, Safari does not read them on older versions.

Is there code that I can use to have Safari revert all webp images to jpg? Without having to readd the code for every single div/image url on the website?

Thanks so much for your time!

Read Only Link
Published URL

2

Hi! Just wondering if you ever found a solution to this…?

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