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

Question

Google insight 告诉我将我的 JPG 图片转换为 WebP。它将每个图像的宽度减少了一半，但问题是 Mac 上的 Safari(可能是最差的浏览器，甚至边缘更好，请不要使用它，否则它会死)不显示 webP。

我添加了 this script到我的应用程序，我认为它是 polyfill，但它没有帮助。它也写在那里下载两个文件，但 webpjs-0.0.2.swf
是断开的链接。有一些有效的 polyfill 吗？

大多数图像通常作为绑定(bind)内联样式用作背景图像。所以例如 this polyfill不会工作，因为 css 支持是 future 的计划。

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

如果你有 mac 和 safari - live demo

Answer 1

我custom built 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");
}

用于将图像链接作为 props 传递(在 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>