WebP 图片虽然添加了 polyfill，但在 Safari 中无法显示

Question

Google Insight建议我将JPG图像转换为WebP格式。这样可以将每张图片的大小减少一半，但问题是Mac上的Safari浏览器无法显示WebP格式（可能是最差的浏览器，甚至比Edge还要差，请不要使用它以便它消失）。 我已经在我的应用程序中添加了该脚本（链接），我相信这是一个polyfill，但它没有帮助解决问题。此外，那里写道需要下载两个文件，但webpjs-0.0.2.swf是一个损坏的链接。有没有什么有效的polyfill？ 大多数图像都作为背景图像提供，通常作为绑定的内联样式。因此，例如这个polyfill无法工作，因为css支持计划将来实现。 另外，这个插件缺乏关于css/inline-style的文档，并且需要对每个组件中的每个图像路径进行替换。 如果您使用Mac和Safari，请查看实时演示。

- BT101

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

为了将图片链接作为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>

- BT101

Answer 2

如果您在寻找一种简单（无需JS）的解决方案来解决.webp图像在Safari上无法显示为CSS背景图像的问题，您只需使用CSS背景属性即可：

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

图片顺序很奇怪，感觉应该把老格式的图片放在.webp文件之后。

无论如何，这为Safari和其他较差的浏览器提供了一个回退图像。

编辑

上面的答案虽然可行，但下载两张图片并不是一个好的解决方案。

在跨浏览器使用.webp的“真正”答案似乎需要使用Modernizr和JS进行浏览器检测-请参见此处：

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

- jonhendrix

---

这不会导致两个图像都被加载吗？！ - artfulrobot

@artfulrobot 实际上...是的。完整的答案因此非常复杂：https://css-tricks.com/using-webp-images/#article-header-id-4。我会更新这个答案。 - jonhendrix

这是一份工作解决方案示例 https://dev59.com/R7roa4cB1Zd3GeqPcgwi#64048033 - Alex