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

Question

谷歌洞察告诉我将我的JPG图像转换为WebP。它将每张图片的亮度降低了一半，但问题是Safari（可能最差的浏览器甚至更好，请不要使用它，因此它会死）在Mac上不会显示webP。

我已将this script添加到我的应用程序中，我相信它是polyfill但它没有帮助。它也写在那里下载两个文件，但webpjs-0.0.2.swf 是断链接。有一些工作的polyfill？

大多数图像通常作为绑定内联样式用作背景图像。所以例如this polyfill将无法工作，因为css支持是未来的计划。

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

如果你有mac和safari - live demo

Answer 1

我qazxswp我刚从中获取了WebP检查器，然后使用这种方法：

对于HTML图像：

custom built modernizr

用于CSS图像：

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

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

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

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