尽管添加了 polyfill，但 WebP 图像不会在 safari 中显示

Question

Google 洞察告诉我将我的 JPG 图像转换为 WebP。它将每个图像的重量减少了一半，但问题是 Mac 上的 Safari（可能是最差的浏览器甚至边缘更好，请不要使用它，因此它会死）不显示 webP。

我已将此脚本添加到我认为是 polyfill 的应用程序中，但它没有帮助。它也写在那里下载两个文件，但webpjs-0.0.2.swf 链接已损坏。有一些有效的 polyfill 吗？

大多数图像通常作为绑定内联样式用作背景图像。因此，例如这个 polyfill将不起作用，因为 css 支持是未来的计划。

反过来，这缺乏关于 css/inline-style 的文档，并且还需要做一些工作来替换每个组件中每个图像中的路径。

如果你有 mac 和 safari -现场演示

Answer 1

我定制的Modernizr 只是从中获取了 WebP 检查器，然后使用了这个方法：

对于 HTML 图像：

<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>

对于 CSS 图像：

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

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

用于将图像链接作为道具传递（在 Vue2 应用程序或任何其他前端框架中）：

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>