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>

Answer 2

If you're looking for a simple (no JS) solution to the problem of .webp images failing to display as CSS background images on Safari, you can just reach for the CSS background property:

background: url(image-filename.webp) center/contain no-repeat,
            url(image-filename.jpg) center/contain no-repeat;

The order of the images is strange, as it feels like you should put the older format after the .webp file.

Anyway, this provides a fallback image for Safari and other lesser browsers to use.

EDIT

The answer above works, but it's not a good solution as browsers just end up downloading both the images.

The "real" answer to using .webp cross-browser seems to require Modernizr and browser detection with JS - see here:

https://css-tricks.com/using-webp-images/#article-header-id-4