WebP images doesn't display in safari although added polyfill

Question

Google insight told me to convert my JPG images to WebP. It reduced wieght of every image by a half but the issue is that Safari (probably worst browser even edge better please don't use it so it will die) on Mac doesn't display webP.

I've added this script to my app which I believe is polyfill but it didn't help. Also it's written there to download both files but webpjs-0.0.2.swf is broken link. Is there some working polyfill?

Most of images are served as background images often as binded inline styles. So for example this polyfill won't work because css support is plan for a future.

In turn this have lack of documentation around css/inline-style and also need some work to be done to replace path in every image in every component.

If you have mac and safari - live demo

Answer 1

I custom built modernizr just took WebP checker from it and then used this approches:

for HTML image:

<picture>
  <source srcset="img/awesomeWebPImage.webp" type="image/webp">
  <source srcset="img/creakyOldJPEG.jpg" type="image/jpeg"> 
  <img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
</picture>

for CSS image:

.no-webp .elementWithBackgroundImage {
  background-image: url("image.jpg");
}

.webp .elementWithBackgroundImage{
  background-image: url("image.webp");
}

for passing image link as props (within Vue2 application or any other front-end framework):

document.querySelector("html").classList[0] === 'webp' ? this.webpEnabled = true : this.webpEnabled = false;
this.webpEnabled ? this.currentImages = this.imagesWebp : this.currentImages = this.imagesJpeg

<some-component :image="currentImages[0]"></some-component>